在Bootstrap 中實現(xiàn)雙行導航欄的核心方法是通過結(jié)構(gòu)組合與樣式調(diào)整。 1. 使用嵌套容器構(gòu)建雙行結(jié)構(gòu)，利用兩個獨立的.navbar 或.container 分別放置頂部和底部導航內(nèi)容，第一行放次要信息如語言切換、聯(lián)繫方式，第二行作為主菜單；2. 利用Flex 佈局合併為一個容器，通過外層div 設(shè)置d-flex flex-column 實現(xiàn)垂直堆疊，統(tǒng)一管理樣式和寬度；3. 優(yōu)化細節(jié)包括控制間距、響應(yīng)式隱藏第一行內(nèi)容、樣式隔離以及顏色搭配協(xié)調(diào)。通過這些步驟即可實現(xiàn)結(jié)構(gòu)清晰且響應(yīng)友好的雙行導航欄。

在Bootstrap 中實現(xiàn)雙行導航欄（Double Row Navbar），其實並不是框架自帶的功能，但通過一些簡單的HTML 結(jié)構(gòu)和CSS 樣式調(diào)整，完全可以達到這個效果。重點在於理解Bootstrap 的佈局機制，並合理利用其柵格系統(tǒng)或flex 工具。

使用嵌套容器構(gòu)建雙行結(jié)構(gòu)

一個常見的做法是使用兩個獨立的.navbar或者.container來分別放置頂部和底部的導航內(nèi)容。

 <div class="top-nav">
  <div class="container">
    <!-- 第一行內(nèi)容，如語言選擇、聯(lián)繫方式等-->
    <div class="d-flex justify-content-between">
      <span>中文/ English</span>
      <span>Contact Us</span>
    </div>
  </div>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">首頁</a></li>
        <li class="nav-item"><a class="nav-link" href="#">產(chǎn)品</a></li>
        <li class="nav-item"><a class="nav-link" href="#">聯(lián)繫我們</a></li>
      </ul>
    </div>
  </div>
</nav>

• 第一行可以放次要信息，比如語言切換、登錄鏈接等。
• 第二行是標準的Bootstrap 導航條，用於主菜單。
• 這種方式結(jié)構(gòu)清晰，也方便響應(yīng)式處理。

利用Flex 佈局合併為一個容器

如果你希望雙行導航在一個父容器中管理，可以用自定義的flex 容器來包裹兩行內(nèi)容：

 <div class="double-navbar d-flex flex-column">
  <div class="top-bar bg-light py-2">
    <div class="container d-flex justify-content-between">
      <span>歡迎訪問我們的網(wǎng)站</span>
      <span>登錄| 註冊</span>
    </div>
  </div>

  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    ...
  </nav>
</div>

• 設(shè)置外層d-flex flex-column可以讓兩部分內(nèi)容垂直堆疊。
• 可以統(tǒng)一設(shè)置寬度或背景色，視覺上更整體。
• 注意移動端適配時要考慮折疊邏輯是否影響第一行內(nèi)容。

小細節(jié)優(yōu)化建議

• 間距控制：兩行之間最好加一點margin 或padding，避免視覺擁擠。

• 響應(yīng)式隱藏第一行：在小屏幕上，可以考慮隱藏頂部那行次要信息：

  

   <div class="top-bar d-none d-md-block">

• 樣式隔離：兩個導航條盡量不要共享太多樣式，避免互相干擾。

• 顏色搭配：上下兩行顏色差異不要太明顯，保持整體協(xié)調(diào)。

---

基本上就這些方法了。雖然Bootstrap 沒有直接支持雙行導航欄，但通過組合現(xiàn)有組件和一點點CSS 調(diào)整，就能輕鬆實現(xiàn)。關(guān)鍵是要理清結(jié)構(gòu)層次，同時注意響應(yīng)式設(shè)計中的體驗問題。

以上是如何在Bootstrap中創(chuàng)建雙行Navbar？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！