Bootstrap 4胶囊导航：大屏居中同行、小屏堆叠的内置实现方法咨询

当然有啦！Bootstrap 4本身就自带了一套响应式工具类，完全不用写复杂的自定义CSS就能搞定你要的效果～

你只需要利用Bootstrap的flex布局工具类和间距工具类，就能轻松实现：大屏下三个胶囊导航居中排列成一行且带小间距，小屏自动堆叠显示。具体做法如下：

核心实现思路 #

用flex布局控制整体排列，配合响应式换行和间距类，完全依赖Bootstrap内置类，不用额外写CSS：

• 外层容器用flex布局实现水平居中，同时设置自动换行
• 给每个导航项添加左右间距，控制彼此间的留白

示例代码 #

<div class="d-flex justify-content-center flex-wrap">
  <ul class="nav nav-pills">
    <li class="nav-item mx-2">
      <a class="nav-link active" href="#">首页</a>
    </li>
    <li class="nav-item mx-2">
      <a class="nav-link" href="#">文章</a>
    </li>
    <li class="nav-item mx-2">
      <a class="nav-link" href="#">关于</a>
    </li>
  </ul>
</div>

类作用解释 #

• .d-flex：将外层容器转为flex布局，让内部导航项可以灵活排列
• .justify-content-center：在flex主轴（大屏下为水平方向）上让导航项居中对齐
• .flex-wrap：当屏幕宽度不足以容纳所有导航项时，自动换行堆叠，实现小屏的堆叠效果
• .mx-2：给每个导航项添加左右方向的margin，控制彼此间的小间距，你可以根据需求调整数值，比如.mx-1（更小间距）或.mx-3（更大间距）

进阶优化（可选） #

如果希望小屏堆叠后的导航项也保持居中对齐，只需要给.nav加上.justify-content-center类即可：

<div class="d-flex justify-content-center flex-wrap">
  <ul class="nav nav-pills justify-content-center">
    <li class="nav-item mx-2">
      <a class="nav-link active" href="#">首页</a>
    </li>
    <li class="nav-item mx-2">
      <a class="nav-link" href="#">文章</a>
    </li>
    <li class="nav-item mx-2">
      <a class="nav-link" href="#">关于</a>
    </li>
  </ul>
</div>

这样就完全用Bootstrap 4的内置类实现了你要的效果，不用再写容易混乱的自定义CSS啦～

内容的提问来源于stack exchange，提问作者cjones