如何使Bootstrap布局中的边框动画与下方文本居中对齐

嘿，我帮你找到问题根源啦！你当前遇到的对齐问题主要有两个原因：

1. 错误使用了Bootstrap版本不兼容的类：你用的是Bootstrap 3.3.7，但给.circle-wrapper加了mx-auto——这个类是Bootstrap 4及以后才引入的，在Bootstrap 3里完全不生效，所以你的圆形动画元素没法水平居中，自然和下方text-center的文本对不齐。
2. 冗余的布局嵌套破坏了栅格结构：你在.row里又嵌套了一层.row和.page-wrapper，这打乱了Bootstrap栅格系统的层级关系，可能导致列的宽度和对齐出现异常。

修复方案 #

下面是修改后的完整代码，我已经调整了HTML结构并替换了正确的Bootstrap 3居中类：

修改后的CSS（无需改动，保留你的原有样式）

.circle-wrapper { position: relative; width: 110px; height: 110px; }
.icon { position: absolute; color: #fff; font-size: 55px; top: 55px; left: 55px; transform: translate(-50%, -50%); }
.circle { display: block; width: 100%; height: 100%; border-radius: 50%; padding: 2.5px; background-clip: content-box; animation: spin 10s linear infinite; }
.circle-wrapper:active .circle { animation: spin 2s linear infinite; }
.success { background-color: #2e3192; border: 2.5px dashed #2e3192; }
.error { background-color: #CA0B00; border: 2.5px dashed #CA0B00; }
.warning { background-color: #F0D500; border: 2.5px dashed #F0D500; }
@keyframes spin { 100% { transform: rotateZ(360deg); } }
.page-wrapper { background-color: #eee; align-items: center; justify-content: center; }

修改后的HTML

<link rel="stylesheet" id="bootstrap-css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css?ver=6.0" type="text/css" media="all">
<div class="our-process center-align tinted-bg">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2>Our Process</h2>
      </div>
      <!-- 移除多余的嵌套.row和.page-wrapper，直接放置列 -->
      <div class="col-md-3 text-center">
        <div class="circle-wrapper center-block"> <!-- 替换mx-auto为Bootstrap3的center-block -->
          <div class="success circle"></div>
          <div class="icon">
            <span class="glyphicon glyphicon-user"></span>
          </div>
        </div>
        <h5>Assessor's Visit</h5>
      </div>
      <div class="col-md-3 text-center">
        <div class="circle-wrapper center-block">
          <div class="success circle"></div>
          <div class="icon">
            <span class="glyphicon glyphicon-user"></span>
          </div>
        </div>
        <h5>Surveyor's Visit</h5>
      </div>
      <div class="col-md-3 text-center">
        <div class="circle-wrapper center-block">
          <div class="success circle"></div>
          <div class="icon">
            <span class="glyphicon glyphicon-user"></span>
          </div>
        </div>
        <h5>installation</h5>
      </div>
      <div class="col-md-3 text-center">
        <div class="circle-wrapper center-block">
          <div class="success circle"></div>
          <div class="icon">
            <span class="glyphicon glyphicon-user"></span>
          </div>
        </div>
        <h5>Post Inspection Visit</h5>
      </div>
    </div>
  </div>
</div>

关键修改点说明 #

• 替换mx-auto为center-block：这是Bootstrap 3中让块级元素水平居中的标准类，能确保你的圆形动画元素在列内居中。
• 简化布局结构：移除多余的嵌套层级后，Bootstrap栅格系统会自动让四个col-md-3均匀分布在一行，每个列内的内容也能保持对齐。

这样修改后，你的圆形动画就会和下方的文本完美居中对齐啦！

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