如何安排元素过多的 Bootstrap 4 菜单

Question

当我有很多菜单链接时，我试图了解如何安排 Bootstrap 4 菜单。

目前，当我放置太多链接时，导航栏不关心竞争者并在竞争者后面扩展他的宽度。

这里有一张图片可以更好地解释：

即使我的声音太多，我也想安排菜单以将菜单的声音保持在灰色的contenitor内。

例如，如果声音太多，我想在下面的行中怎么办？

这里是我的代码：

<header>
  <div class="container">
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" 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>
      <a class="navbar-brand" href="#"><img src="assets/img/logo.png" width="160px"></a>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item text-center active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
          <li class="nav-item text-center">
            <a class="nav-link" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

Answer 1

您可以使用 flex-column 在 bootstrap 4 alpha 菜单中创建两行。

<header>
    <div class="container">
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
          <button class="navbar-toggler navbar-toggler-right" 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>
          <a class="navbar-brand" href="#"><img src="assets/img/logo.png" width="160px"></a>
          <div class="collapse navbar-collapse flex-column" id="navbarNav">
            <ul class="navbar-nav mx-auto">
              <li class="nav-item text-center active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
            </ul>
           <ul class="navbar-nav mx-auto">
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
              <li class="nav-item text-center">
                <a class="nav-link" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
    </div>
</header>

flex-column 类将两个 ul 标签垂直堆叠。希望这就是您想要的。