html - 在 Bootstrap 4 中创建导航栏和子导航栏

Question

我正在使用 Bootstrap v4，我正在根据 http://v4-alpha.getbootstrap.com/components/navbar/ 创建一个固定顶部的导航栏.

但我想要的是在导航栏中创建另一行。所以我实际上想要两个相邻的导航栏。

我试过简单地用

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    // first line
  </div>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    // second line
  </div>
</nav>

但它没有换行。它只是尝试并排添加。

一种方法是依次创建两个导航栏，但我希望第二行与第一行一样。

Answer 1

以上代码存在三个问题。首先，您错过了关闭第一个 <div> ，这可能是导航栏彼此相邻的原因。其次，您使用重复的 ID navbarSupportedContent .第三，您实际上没有任何按钮来切换导航栏，因此它们根本不会出现在移动显示屏上。

要解决能够在移动设备上切换多个导航栏的问题，您需要的是 navbar-collapse作为包含两个导航栏 div 的单个父 div。

所以，您实际上可能正在寻找这样的东西:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">Toggle Navigation</span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div>
    // first line
    </div>
    <div>
    // second line
    </div>
  </div>
</nav>

我创建了一个 BootPly 来展示这个 here .

编辑:

默认情况下，Bootstrap 4 使用 flex对于导航栏，但实际上并没有添加所需的 flex-flow默认情况下。您可以通过添加以下内容来解决此问题:

.navbar-collapse {
  flex-flow: row wrap;
}

请注意，您还需要添加 flex-direction到你的行，并指定它们应该占据 flex 宽度的 100%。我给 DIV 类 flex-row为此(flex.scss 中的默认名称):

.flex-row {
  flex-direction: row;
  width: 100%;
}

我创建了一个新的 BootPly 来覆盖这个 here .

希望对您有所帮助! :)