如何垂直而不是水平扩展 Bootstrap NavBar 列表项

Question

我试图在大屏幕的屏幕左侧有一个固定的垂直 Bootstrap NavBar，并让它折叠成一个用于小屏幕的 NavBar 按钮。

我尝试将 Bootstrap NavBar 放置在列内，但列表项继续水平扩展。

如何让列表项在展开页面时垂直堆叠而不是水平并排？

<div class="col-lg-2">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </div>
      </nav>
</div>

Answer 1

您可以使用 CSS 并将 flexbox 方向更改为 .navbar 类的列并像这样折叠 ul 元素。请注意使用@media 查询将这种行为限制在桌面（大屏幕）上的重要性，使用此处找到的响应性引导限制，因此我们将使用 1200 像素。 https://getbootstrap.com/docs/4.1/layout/overview/

@media screen and (min-width:1200px) {
.navbar, .collapse ul {
  flex-direction:column!important;
}}

https://codepen.io/larrytherabbit/pen/VwjwwoV