如何使用 Bootstrap 4 建立兩行導覽列？-css教學-PHP中文網

如何使用 Bootstrap 4 建立兩行導覽列？

Barbara Streisand

發布： 2024-12-10 03:32:12

原創

657 人瀏覽過

How Do I Create a Two-Row Navbar Using Bootstrap 4?

具有兩行的 Bootstrap 4 導覽列

在本 Bootstrap 4 教學中，我們將向您展示如何建立具有兩行的導覽列。這是具有大量導航選項或想要分離不同類型導航的網站的常見設計模式。

先決條件

要遵循此操作，您需要：

對 HTML 和 CSS 的基本了解
安裝在您的 Bootstrap 4系統

建立導覽列

先建立一個新的 HTML 檔案。
將以下程式碼新增至您的檔案以建立基本的導覽列結構：

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

登入後複製

新增兩個Rows

要將兩行，我們將在navbar-collapse div 上使用flex-column 類別。這將導致 navbar-collapse div 的子元素垂直堆疊。

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

登入後複製

新增導航連結

現在我們有兩行，我們可以將導航連結新增至它們。我們將建立兩個 ul 元素，每一行一個。

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

登入後複製

結果

這是產生的包含兩行的導覽列：


  Navbar
  

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

登入後複製

以上是如何使用 Bootstrap 4 建立兩行導覽列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！