在 boostrap 行中没有包裹

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-8andcol-xs-4而不是col-md-8and col-md-4。如果您不告诉它们在 xs 大小上的行为方式，那么您的列显示为普通块是正常的。

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