Bootstrap中row使用justify-content-center不生效问题咨询

justify-content-* 系列类完全可以正常作用于Bootstrap的row元素，你的代码没有产生预期效果，核心原因是row内三个带col-*类的子元素宽度加总已经撑满了整行12列栅格，主轴方向没有剩余空间可供justify属性分配对齐位置。

原因说明 #

• Bootstrap的row类默认自带display: flex、flex-wrap: wrap属性，本身就是标准flex容器，原生支持所有flex主轴对齐类，给row加justify-content-center的写法本身完全符合框架规范。
• Bootstrap栅格系统将整行宽度等分为12份，col-*类的作用是给子元素分配对应占比的宽度。你的代码里三个子元素都设置了col-4，4*3=12，刚好把整行宽度占满，没有多余留白，居中对齐的效果自然无法体现。
• 问题复现代码如下：

<div class="container my-5">
  <div class="row justify-content-center">
    <hr class="col-4  border-2 border-top border-danger">
    <p class="col-4" >Skills and Abilities</p>
    <hr class="col-4  border-2 border-top border-danger">
  </div>
</div>

解决方法 #

根据你的实际需求选择对应方案即可：

• 如果预期是实现「两边分割线+中间文字」的标题块整体居中效果，调整子元素的col宽度，让总占比小于12，预留出剩余空间供对齐规则生效，参考代码如下：

  <div class="container my-5">
    <div class="row justify-content-center align-items-center">
      <hr class="col-3 border-2 border-top border-danger">
      <!-- 中间文字用col-auto自适应内容宽度，避免固定宽度导致文字换行 -->
      <p class="col-auto px-3 mb-0">Skills and Abilities</p>
      <hr class="col-3 border-2 border-top border-danger">
    </div>
  </div>
  

  额外加的align-items-center可以让分割线和文字在垂直方向居中对齐，px-3给文字和分割线之间留适当间距，mb-0去掉p标签默认的下边距，视觉效果更协调。
• 如果你就是需要三个子元素各占1/3宽度铺满整行，只是希望每个子元素内部的内容居中，不需要调整col宽度，直接给每个子元素加text-center类即可——这种场景下要对齐的是子元素内部的内容，不是子元素本身在row中的位置。

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