如何使用 Bootstrap 4 创建两行导航栏？

具有两行的 Bootstrap 4 导航栏

在本 Bootstrap 4 教程中，我们将向您展示如何创建具有两行的导航栏。这是具有大量导航选项或想要分离不同类型导航的网站的常见设计模式。

先决条件

要遵循此操作，您需要：

• 对 HTML 和 CSS 的基本了解
• 安装在您的 Bootstrap 4系统

创建导航栏

1. 首先创建一个新的 HTML 文件。
2. 将以下代码添加到您的文件中以创建基本的导航栏结构：

<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">
<h3 id="添加两个Rows">添加两个Rows</h3>
<p>要向导航栏添加两行，我们将在 navbar-collapse div 上使用 flex-column 类。这将导致 navbar-collapse div 的子元素垂直堆叠。</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="添加导航链接">添加导航链接</h3>
<p>现在我们有两行，我们可以向它们添加导航链接。我们将创建两个 ul 元素，每一行一个。</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="结果">结果</h3>
<p>这是生成的包含两行的导航栏：</p>
<pre class="brush:php;toolbar:false"><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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse flex-column"></div></nav>