如何建立具有垂直堆疊選單的兩行 Bootstrap 4 導覽列？

建立具有兩行的Bootstrap 4 導覽列

挑戰

在Bootstrap 4 中，使用者經常遇到建置不同行的導覽列的挑戰排列：左側有一個突出的品牌/圖標，右側有兩個垂直對齊的導航欄導航選單。目標是實現兩個選單在圖示右側佔據單獨行的佈局。

解決方案：利用 Flexbox

為了垂直對齊選單，我們可以利用 flex-column flexbox navbar-collapse div 上的實用程式類別。這會為 div 的子元素設定 flex-direction: column，確保它們垂直堆疊。

<div>

其他注意事項

要增強自訂和對齊功能，請考慮以下提示：

• 調整圖示大小：如果圖示太大或太小，可以使用font-size 來調整調整其大小。
• 在選單之間建立空間：使用第二個導覽列導覽上的 margin-top 在選單之間新增一些垂直空間。
• 對齊選單右： 在 navbar-nav 類別上使用 margin-left: auto 將它們對齊到圖示。

透過這些調整，您可以根據需要建立具有兩個垂直堆疊選單的 Bootstrap 4 導覽列。

以上是如何建立具有垂直堆疊選單的兩行 Bootstrap 4 導覽列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！