如何将Bootstrap 4列表标签（nav-pills）居中对齐？

嘿，这个需求太常见了，Bootstrap 4其实自带了很方便的解决方案，给你两种靠谱的实现方法：

方法1：用Bootstrap内置工具类（最简单） #

Bootstrap 4的nav组件默认是flex容器，直接给你的<ul>标签加上justify-content-center这个工具类，就能让所有标签项水平居中对齐。

修改后的完整代码示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <!-- 你其他的标签项可以继续放在这里 -->
</ul>

方法2：自定义CSS（适合需要额外样式调整的场景） #

如果之后你想调整标签的间距、或者加一些自定义样式，可以写个简单的CSS类：

.centered-nav-pills {
  display: flex;
  justify-content: center;
  width: 100%;
}

然后把这个类加到你的<ul>上就行：

<ul class="nav nav-pills mb-3 centered-nav-pills" id="pills-tab" role="tablist">
  <!-- 标签内容 -->
</ul>

小提醒 #

因为Bootstrap 4的nav组件本身就是基于flex布局构建的，所以这两种方法兼容性都很好，只要是支持Bootstrap 4的浏览器都能正常生效~

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