html - 我可以让 Bootstrap 4 导航栏切换到一列而不是折叠吗？

Question

我希望我的所有菜单项始终保持可见，并且在屏幕尺寸太小时简单地从居中行形式切换到居中列形式。

 <div style="position: sticky; top: 0px;"> 

    <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar9">
        <span class="navbar-toggler-icon"></span>           
    </button>     this is the fricking collapse button -->

    <div class="navbar-collapse collapse" id="navbar10">
        <ul class="navbar-nav nav-fill w-100">
            <li class="nav-item">
                <a class="nav-link" href="#">aaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">bbb</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ccc</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ddd</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">eee</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ffff</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

您可以使用用于构建布局的常规引导类并删除折叠导航栏类:参见https://getbootstrap.com/docs/4.0/utilities/flex/

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

示例:flex-md-row 类(在整页中播放片段并调整窗口大小以查看它切换行/列。您也可以尝试 flex-lg-row 如果您认为它变成专栏为时已晚。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="navbar " id="navbar10">
        <ul class="navbar-nav nav-fill w-100 flex-md-row">
            <li class="nav-item">
                <a class="nav-link" href="#">aaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">bbb</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ccc</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ddd</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">eee</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ffff</a>
            </li>
        </ul>
    </div>
</div>