Nowrap在bootstrap行中

Question

我想让标题包含徽标和菜单。

我做了一行和两列。我使用了booеstrap类。当我将窗口调整为较小时，菜单会在徽标下跳转（查看我的图片）。在屏幕宽度很小且菜单在徽标下跳转的那一刻我想制作折叠菜单，但我不知道如何将其写入代码：

我的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>

Answer 1

您可以像这样使用flex-nowrap：

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

在这里检查： Bootstrap 4.0 flex-nowrap

Answer 2

尝试使用课程col-xs-8和col-xs-4代替col-md-8和col-md-4。如果您没有告诉他们xs大小的行为方式，那么您的列显示为普通块是正常的。

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