如何创建两行 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 及更高版本，请确保按照提供的链接使用更新的代码以实现兼容性。