如何在Bootstrap 4中正确偏移网格列，使其居中于三列下方？

我尝试用Bootstrap 4实现如下布局：上方三个均匀分布的盒子，下方两个盒子均匀居中分布。

目标布局示意图：

我的代码如下：

<!-- ======= Services Section ======= -->
<section id="services" class="services">
  <div class="container">

    <div class="section-title">
      <span>Services</span>
      <h2>Services</h2>
      <p>We are experts in delivering the following services.</p>
    </div>

    <div class="row">
      <div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="fade-up">
        <div class="icon-box">
          <div class="icon"><i class="bx bxl-dribbble"></i></div>
          <h4><a href="">Service one</a></h4>
          <p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="150">
        <div class="icon-box">
          <div class="icon"><i class="bx bx-file"></i></div>
          <h4><a href="">Service two</a></h4>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="300">
        <div class="icon-box">
          <div class="icon"><i class="bx bx-tachometer"></i></div>
          <h4><a href="">Service three</a></h4>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
        </div>
      </div>

        <div class="col-lg-4 col-lg-offset-2 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="450"></div>
        <div class="icon-box">
          <div class="icon"><i class="bx bx-world"></i></div>
          <h4><a href="">Service four</a></h4>
          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
        </div>
      </div>

        <div class="col-lg-4 col-lg-offset-2 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="450"></div>
        <div class="icon-box">
          <div class="icon"><i class="bx bx-slideshow"></i></div>
          <h4><a href="">Service five</a></h4>
          <p>Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur</p>
        </div>
      </div>

    </div>

  </div>
<!-- ======= End of Services Section ======= -->

实际显示效果：

不知道问题出在哪里？

你的代码存在三个核心问题：

1. 标签闭合错误：第四、第五个<div class="col-...">标签被提前闭合，导致icon-box脱离列容器，无法被Bootstrap网格系统控制。
2. Bootstrap 4偏移类使用错误：Bootstrap 4中没有col-lg-offset-2类，正确偏移类是offset-lg-2。
3. 下排盒子未居中对齐：下排两个盒子没有被正确设置居中逻辑，导致布局错乱。

修正后的代码如下：

<!-- ======= Services Section ======= -->
<section id="services" class="services">
  <div class="container">

    <div class="section-title">
      <span>Services</span>
      <h2>Services</h2>
      <p>We are experts in delivering the following services.</p>
    </div>

    <!-- 上排三个均匀分布盒子 -->
    <div class="row">
      <div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="fade-up">
        <div class="icon-box">
          <div class="icon"><i class="bx bxl-dribbble"></i></div>
          <h4><a href="">Service one</a></h4>
          <p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="fade-up" data-aos-delay="150">
        <div class="icon-box">
          <div class="icon"><i class="bx bx-file"></i></div>
          <h4><a href="">Service two</a></h4>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="300">
        <div class="icon-box">
          <div class="icon"><i class="bx bx-tachometer"></i></div>
          <h4><a href="">Service three</a></h4>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
        </div>
      </div>
    </div>

    <!-- 下排两个居中盒子 -->
    <div class="row justify-content-center mt-4">
      <div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="450">
        <div class="icon-box">
          <div class="icon"><i class="bx bx-world"></i></div>
          <h4><a href="">Service four</a></h4>
          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="600">
        <div class="icon-box">
          <div class="icon"><i class="bx bx-slideshow"></i></div>
          <h4><a href="">Service five</a></h4>
          <p>Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur</p>
        </div>
      </div>
    </div>

  </div>
<!-- ======= End of Services Section ======= -->

关键修正说明： #

• 将下排两个盒子单独放在新的row中，添加justify-content-center类让列自动居中，符合Bootstrap 4的布局逻辑。
• 修复列标签的闭合错误，确保icon-box完全嵌套在col-容器内。
• 调整下排盒子的间距和动画延迟，保持布局美观协调。

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