Bootstrap 行内不换行问题

Question

我希望制作一个包含标志和菜单的页眉。

我使用了一行和两列，并使用了Bootstrap类。当我将窗口大小调整为较小时，菜单会跳到标志下面（请看我的图片）。在屏幕宽度较小且菜单跳到标志下面的这一刻，我希望制作折叠菜单，但我不知道如何编写代码：

我的HTML代码：

<div class="mycontainer container-fluid">
<div class="container">
    <div class="row">
        <div class="logo col-md-4">
        <a href = "/" class = "logo"><img src="/bendikon/wp-content/themes/bendikon/images/logo.png" alt="banner"></a>    
        </div>
        <div class="header-menu col-md-8">
        <?php if ( has_nav_menu( 'primary-menu' ) ) { ?>
        <?php wp_nav_menu( array( 'theme_location' => 'primary-menu') ); ?>
        <?php } else { ?>
              <ul class="sf-menu">
                <li><a href="/">Home</a></li>
                <li><a href="/?page_id=2">Sample Page</a></li>
                <li><a href="/?p=1">Sample post</a></li>
              </ul>
            <?php } ?>
        </div>
        </div>
    </div>
</div>

- Martin Benda

Answer 1

你可以这样使用 flex-nowrap：

<div class="row flex-nowrap">
    <div class="col"></div>
    <div class="col"></div>
</div>

在这里查看： Bootstrap 4.0的flex-nowrap

- MrMaavin

Answer 2

尝试使用类col-xs-8和col-xs-4代替col-md-8和col-md-4。如果您不告诉它们在xs大小上如何行为，您的列通常会显示为普通块。

此外，您可能希望将类img-responsive添加到您的标志img标记中，以将最大宽度限制为包含列的100%。

- Dax