在Bootstrap 中製作垂直導(dǎo)航欄的方法如下：1. 使用flex-column 類將默認(rèn)水平導(dǎo)航改為垂直排列，結(jié)構(gòu)代碼為

；2. 添加p-3、mb-2 等類優(yōu)化間距和內(nèi)邊距，使用bg-light 和text-dark 調(diào)整顏色提升外觀；3. 可選地加入圖標(biāo)（如Bootstrap Icons）或靜態(tài)子菜單增強(qiáng)功能和視覺(jué)效果。通過(guò)這些步驟即可快速構(gòu)建一個(gè)響應(yīng)式且樣式統(tǒng)一的垂直側(cè)邊導(dǎo)航欄。



做垂直導(dǎo)航欄在Bootstrap 裡其實(shí)挺直接的，尤其是用它的內(nèi)置類和結(jié)構(gòu)。不需要寫(xiě)太多額外代碼，就能快速搭出一個(gè)響應(yīng)式、樣式統(tǒng)一的側(cè)邊導(dǎo)航。



基礎(chǔ)結(jié)構(gòu)：使用flex-column實(shí)現(xiàn)垂直排列

Bootstrap 的導(dǎo)航組件默認(rèn)是水平的，但可以通過(guò)加一個(gè)flex-column類來(lái)改成垂直方向。

 <ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link" href="#">首頁(yè)</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">關(guān)於</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">聯(lián)繫</a>
  </li>
</ul>

• nav是基礎(chǔ)類，控制整體樣式；
• flex-column把佈局從橫向改為縱向；
• 每個(gè)nav-item是一個(gè)菜單項(xiàng)；
• nav-link是鏈接樣式。

這樣寫(xiě)出來(lái)的就是一個(gè)簡(jiǎn)單的垂直導(dǎo)航欄，沒(méi)有背景色也沒(méi)有間距，適合放在側(cè)邊欄區(qū)域配合其他佈局使用。



添加樣式和間距

默認(rèn)的垂直導(dǎo)航看起來(lái)有點(diǎn)緊湊，你可以通過(guò)幾個(gè)方式讓外觀更好看：

• 給.nav加上p-3或py-2來(lái)增加內(nèi)邊距；
• 給每個(gè)nav-link加mb-2讓條目之間有空隙；
• 使用Bootstrap 的顏色類，比如bg-light或text-dark來(lái)調(diào)整背景和文字顏色；

示例：



 <ul class="nav flex-column bg-light p-3">
  <li class="nav-item mb-2">
    <a class="nav-link text-dark" href="#">首頁(yè)</a>
  </li>
  <li class="nav-item mb-2">
    <a class="nav-link text-dark" href="#">關(guān)於</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-dark" href="#">聯(lián)繫</a>
  </li>
</ul>

這樣做出來(lái)的導(dǎo)航更貼近實(shí)際項(xiàng)目中的樣式需求，看起來(lái)也更專業(yè)一些。

可選功能：添加圖標(biāo)或子菜單

如果想做得更豐富一些，可以考慮加入圖標(biāo)或者下級(jí)菜單。

• 圖標(biāo)可以用FontAwesome 或Bootstrap Icons；
• 子菜單可以用嵌套的ul實(shí)現(xiàn)，不過(guò)需要自己寫(xiě)一點(diǎn)CSS 或JS 控制展開(kāi)收起；
• 如果只是靜態(tài)頁(yè)面，建議簡(jiǎn)單點(diǎn)，別搞太複雜的功能；

舉個(gè)小例子（不帶交互）：

 <ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-house"></i> 首頁(yè)</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-info-circle"></i> 關(guān)於我們</a>
  </li>
</ul>

這裡用了Bootstrap Icons 的圖標(biāo)庫(kù)，加上圖標(biāo)後視覺(jué)效果會(huì)更清晰直觀。

基本上就這些。只要掌握基本結(jié)構(gòu)，再根據(jù)項(xiàng)目需求加點(diǎn)樣式和功能，就能做出一個(gè)實(shí)用的垂直導(dǎo)航欄了。

以上是如何在引導(dǎo)程序中製作垂直的Navbar？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！