Javascript 将导航栏品牌和导航项放在Bootstrap 4导航栏的不同行上

我想将导航栏品牌和导航项目放置在两个不同的行上

第一行为导航栏品牌，第二行为导航项目

当前代码：

<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="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

---

要达到预期效果，请执行以下操作：

将flex列添加到导航栏，如下面的代码片段所示。这会将导航栏变成一个柔性柱，这就是在这种情况下启用所需堆叠行为的原因

如果您不希望项目居中，而是希望它们左对齐，那么也可以将align items开始类添加到该类中

要使navbar品牌与本例中的项目对齐，请在navbar品牌上添加ml-2类左边距：2个单位

为了确保在收拢导航栏时一切正常，您需要从上面修改两个类。因此，如果您有如下示例中的navbar expand lg，则需要将flex column更改为flex lg column，以确保仅当屏幕为大lg或更大时才会切换到flex column。然后将ml-2类更改为ml-lg-2，以确保navbar品牌的左边距仅针对较大屏幕进行修改，并针对较小屏幕设置为默认值

单击下面的“运行代码段”并展开到完整页面：

---

谢谢，你救了我的命，我还不习惯引导4