我可以让 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/

弹性

使用一整套响应式 flexbox 实用程序快速管理网格列、导航、组件等的布局、对齐和大小。对于更复杂的实现，可能需要自定义 CSS。

带有 :flex-md-row 类的示例（在整页中播放 sn-p 并调整窗口大小以查看它切换行/列。如果您认为它变成列太晚了，也可以尝试 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>

Answer 2

使用 CSS 媒体查询，您可以设置特定的断点来更改您的元素。在本例中，如果窗口小于 480px，那么我们可以将宽度调整为 100%。

（要查看它的实际效果，请单击运行 > 整页 > 然后调整窗口大小）

.navTitle {
  width: 20%;
  float: left;
  background-color: lightGrey;
  outline: 1px solid black;
}

@media screen and (max-width: 480px) {
    .navTitle {
       width: 100%;
    }
}

<div class="navTitle">
 <p>Section 1</p>
</div>

<div class="navTitle">
 <p>Section 2</p>
</div>

<div class="navTitle">
 <p>Section 3</p>
</div>

<div class="navTitle">
 <p>Section 4</p>
</div>

<div class="navTitle">
 <p>Section 5</p>
</div>