Bootstrap网格居中失效：分辨率变化时无法居中网格列

嘿，我来帮你搞定这个网格居中的问题！从你提供的代码来看，主要是没正确利用Bootstrap的布局特性来实现列的居中，下面给你几个靠谱的解决方法：

方法1：使用Bootstrap内置的flex居中类 #

Bootstrap 4及以上版本的row本身是flex容器，只要给它加上justify-content-center类，就能让所有子列在水平方向自动居中，不管分辨率怎么变都能生效。修改后的代码如下：

<div class="container-fluid container-reasons">
  <div class="row justify-content-center"> <!-- 新增居中类 -->
    <div class="col-xs-12 col-sm-6 col-md-4 text-center padding">
      <img src="//####/wp-content/uploads/theme-images/reasonHeart.png" width="50px" height="46px" />
      <h2>Lorem Ipsum 1</h2> <!-- 注意修正标签闭合错误 -->
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...</p>
    </div>
    <!-- 其他列同样放在这个row容器内即可 -->
  </div>
</div>

方法2：排查自定义样式的干扰 #

你代码里的container-reasons是自定义类，要检查一下这个类有没有写过float、position: absolute或者margin-left/right这类会破坏居中的样式。如果存在冲突样式，要么删除，要么调整为不影响Bootstrap布局的写法：

.container-reasons {
  display: block;
  margin: 0 auto;
  /* 避免添加会干扰flex布局的属性 */
}

方法3：针对Bootstrap 3的兼容方案（若使用旧版本） #

如果你还在使用Bootstrap 3（它基于float布局而非flex），需要换一种实现方式：给row加上text-center，再给列添加自定义样式取消float并设置为inline-block：

<div class="container-fluid container-reasons">
  <div class="row text-center">
    <div class="col-xs-12 col-sm-6 col-md-4 text-center padding custom-center-col">
      <!-- 内容保持不变 -->
    </div>
  </div>
</div>

对应的CSS：

.custom-center-col {
  display: inline-block;
  float: none;
  margin-right: -4px; /* 消除inline-block元素间的默认间隙 */
}

另外顺手提醒下：你代码里的<h2>标签用了<h3>闭合，这个小错误也建议修正，避免潜在的布局或渲染异常~

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