在 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 指定了 class flex-row（flex.scss 中的默认名称）：

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

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

希望这对您有所帮助！ :)

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

Create navbar and sub-navbar in Bootstrap 4

html

css

navbar

twitter-bootstrap