如何使用 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>