一个引导程序 4 导航栏上的多个断点

Question

我正在寻找一种在我的 BS4 导航栏中使用 2 个不同断点的方法。许多菜单项应始终折叠，而不同的菜单项仅在 -sm 屏幕上折叠。因此，在下面的示例中，选项 4-6 应始终折叠，选项 1-3 应在大于 -sm 的屏幕上可见，并且在 -sm 屏幕上折叠到同一个切换器。两个部分应右对齐，彼此相邻。

在大屏幕上应该是这样的： Large screen example

在小屏幕上是这样的： Small screen example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container">

        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbars">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse navbars" id="navbar1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="#">Option 1</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 2</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 3</a> </li>
            </ul>
        </div>

        <div class="collapse navbar-collapse navbars" id="navbar2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="#">Option 4</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 5</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 6</a> </li>
            </ul>
        </div>
    </div>
</nav>

我到处搜索，但似乎找不到解决方案。我试图组合两个固定顶部的导航栏，但是当您单击切换器时会给出重叠的结果。我玩过 '.navbar-collapse-sm' 和类似的类，但这也不起作用。

那么这甚至可能吗？任何帮助或提示将不胜感激。

Answer 1

需要一些自定义 CSS 来控制 #navbar1...

@media (min-width: 576px) {
    #navbar1 {
        display: flex !important;
        flex-basis: auto;
    }

    /* prevent flicker during toggle */
    #navbar1.collapsing {
        transition: none;
        height: auto;
    }

    #navbar1 .navbar-nav {
        flex-direction: row;
    }
}

以及对导航栏标记的一些更改：

<nav class="navbar bg-dark navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler order-sm-1" type="button" data-toggle="collapse" data-target=".navbars">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse order-sm-0 navbars" id="navbar1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 1</a> </li>
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 2</a> </li>
                <li class="nav-item pr-sm-3"><a class="nav-link" href="#">Option 3</a> </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse navbars order-last" id="navbar2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="#">Option 4</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 5</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Option 6</a> </li>
            </ul>
        </div>
    </div>
</nav>

演示：https://codeply.com/p/pAhSgWkXcA