如何创建两行 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中文网其他相关文章！