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

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

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

一個常見的做法是使用兩個獨立的 .navbar 或者 .container 來分別放置頂部和底部的導(dǎo)航內(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>

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

利用 Flex 布局合并為一個容器

如果你希望雙行導(dǎo)航在一個父容器中管理，可以用自定義的 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)容。

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

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

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

  

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

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

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

---

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

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