如何建立兩行 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">

   登入後複製

2. 可選對齊和填充：

   如果需要，添加額外的對齊和填充以增強視覺外觀。例如，要右對齊文字並向社交媒體圖示添加一些垂直填充：

   <ul class="navbar-nav flex-row mb-2">
       <li class="nav-item">
           <a class="nav-link py-1 pr-3" href="#">
               <i class="fa fa-facebook"></i>
           </a>
       </li>
       ...
   </ul>

   登入後複製

3. 其他變體：

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

示範和代碼：

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

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

注意：

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

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