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

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

設定具有兩行的Bootstrap 4 導覽列非常簡單，可以在您的桌面桌面列上進行多種安排網頁。若要實現此目的，請在 navbar-collapse div 上使用 Flexbox 公用程式類別 flex-column，確保子元素垂直對齊。

1. 新增 flex-column 類別：

   用flex-column類包裹navbar-collapse div實現垂直

   <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3">
   <li>
   <p><strong>可選對齊和填充：</strong></p>
   <p>如果需要，添加額外的對齊和填充以增強視覺外觀。例如，要右對齊文字並向社交媒體圖示添加一些垂直填充：</p>
   <pre class="brush:php;toolbar:false">

   ...

2. 其他變體：

   嘗試替代佈局，例如右側有兩行的導航欄或右對齊搜尋

示範和代碼：

這是一個演示以及帶有兩個導航列的相應代碼rows:


• [演示](https:// jsfiddle.net/lot99)
• [程式碼](https:// codepen.io/anon/pen/VEPqpe?editors=1010)
  

注意：

中Bootstrap 4.0.0 及更高版本，請確保按照提供的連結使用更新的程式碼以實現相容性。