html - Bootstrap 行中的 nowrap

Question

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

我做了一行和两列。我使用了 Bootstrap 类。当我将窗口大小调整为较小时，菜单会在 Logo 下跳转(看我的图片)。在屏幕宽度较小且菜单在 Logo 下跳转的那一刻，我想制作折叠菜单，但我不知道如何将其编写为代码:



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