Html 在引导4中创建导航栏和子导航栏

我使用的是Bootstrap v4，我正在根据创建一个固定顶部导航栏

但我想要的是在导航栏中创建另一行。所以我想要两个导航条紧挨着

我已经试着用简单的方法来做了

<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>

但它没有新的线路。它只是试图将其并排添加

---

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

以上代码有三个问题。首先，您没有关闭第一个导航栏，这可能就是导航栏彼此相邻的原因。其次，使用重复的ID navbarSupportedContent。第三，你们实际上并没有任何按钮来切换导航栏，所以它们根本不会出现在手机屏幕上

要解决在mobile上切换多个导航栏的问题，需要将导航栏折叠为包含两个导航栏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>

请注意，您还需要向行中添加弯曲方向，并指定它们应占据弯曲宽度的100%。我在flex.scss中为DIVs指定了类flex行的默认名称：

我已经创建了一个新的引导层来覆盖这个

---

希望这有帮助！：

谢谢，但它似乎在Bootstrap 3中起作用，但在Bootstrap 4中不起作用。我更新了我的答案，以涵盖Bootstrap 4使用Flexbox的事实：

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

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