移动端Bootstrap图片文本网格偏移问题排查

我正在做一个2×3的图片+文本网格，要求居中显示。桌面端显示正常，但移动端出现明显偏移。

桌面端效果：

移动端效果：

相关代码 #

HTML代码 #

<div class="row" id="selected-works-section">
    <h1>Selected Works</h1>
    <div class="col-lg-12">
      <div id="selected-works-grid" class="container-fluid">
        <div class="row">
          <div
            class="selected-works-grid-item col-lg-4 col-md-6 col-sm-12 col-xs-12"
          >
            <img
              src="/assets/images/belden_suites.jpg"
              alt="belden suites"
              class="img-fluid mx-auto d-block"
            />
            <div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
              <h6>BELDEN SUITES</h6>
              <p>Creative direction and execution, 2015</p>
            </div>
          </div>
          <div
            class="selected-works-grid-item col-lg-4 col-md-6 col-sm-12 col-xs-12"
          >
            <img
              src="/assets/images/camies_kitchen.jpg"
              alt="camie's kitchen"
              class="img-fluid mx-auto d-block"
            />
            <div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
              <h6>CAMIE'S KITCHEN</h6>
              <p>Concept and design, 2018</p>
            </div>
          </div>
          <div
            class="selected-works-grid-item col-lg-4 col-md-4 col-sm-12 col-xs-12"
          >
            <img
              src="/assets/images/fairhill_hall.jpg"
              alt="fairhill hall"
              class="img-fluid mx-auto d-block"
            />
            <div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
              <h6>FAIRHILL HALL</h6>
              <p>Concept and rendering, 2013</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div
            class="selected-works-grid-item col-lg-4 col-md-6 col-sm-12 col-xs-12"
          >
            <img
              src="/assets/images/gaels_restaurant.jpg"
              alt="gael's restaurant"
              class="img-fluid mx-auto d-block"
            />
            <div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
              <h6>GAEL'S RESTAURANT</h6>
              <p>Concept, rendering and execution, 2015</p>
            </div>
          </div>
          <div
            class="selected-works-grid-item col-lg-4 col-md-4 col-sm-12 col-xs-12"
          >
            <img
              src="/assets/images/guajardo_residence.jpg"
              alt="guajardo residence"
              class="img-fluid mx-auto d-block"
            />
            <div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
              <h6>GUAJARDO RESIDENCE</h6>
              <p>Concept, rendering and execution, 2025</p>
            </div>
          </div>
          <div
            class="selected-works-grid-item col-lg-4 col-md-4 col-sm-12 col-xs-12"
          >
            <img
              src="/assets/images/newark_residence.jpg"
              alt="newark residence"
              class="img-fluid mx-auto d-block"
            />
            <div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
              <h6>NEWARK RESIDENCE</h6>
              <p>Concept, rendering and execution, 2020</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

自定义CSS代码 #

/* selected works section */
.selected-works-grid-item > img {
  max-width: 350px;
  max-height: 200px;
}
.selected-works-grid-item-text > h6 {
  margin-top: 20px;
  font-weight: bolder;
}

我已经试过调整col-md-X的各种组合，也单独用过mx-auto和d-block类（不搭配img-fluid），但都解决不了问题。想问移动端偏移的原因是什么？

偏移原因及修复方案 #

核心原因 #

1. 文本容器的偏移类残留：文本容器selected-works-grid-item-text加了offset-xl-2，这个类只在超大屏生效，但小屏幕没有重置；同时col-lg-8在移动端会让文本容器占8/12宽度，又没设置居中，导致文本区域偏移，视觉上整个网格项不对齐。
2. 网格项的md列类不一致：部分网格项用col-md-6，部分用col-md-4，这种混合会让Bootstrap在屏幕尺寸切换时，列间距计算出现异常，间接影响移动端布局。
3. 容器嵌套错误：container-fluid被放在col-lg-12里面，两者都带默认左右内边距，双重内边距在小屏幕下挤压内容，造成偏移视觉效果。

修复方法 #

• 调整文本容器类：把selected-works-grid-item-text的col-lg-8 offset-xl-2改成col-10 col-lg-8 mx-auto text-center，用mx-auto实现居中，text-center保证文本对齐，避免偏移类影响小屏幕。
• 统一md列类：所有网格项的col-md-*统一成col-md-6（中等屏2列）或col-md-4（中等屏3列），保持布局一致性。
• 修正容器嵌套：去掉外层的col-lg-12，把container-fluid直接放在#selected-works-section的row里，避免双重内边距。修改后结构示例：

<div class="row" id="selected-works-section">
  <h1>Selected Works</h1>
  <div id="selected-works-grid" class="container-fluid">
    <!-- 原网格内容 -->
  </div>
</div>

• 保留图片类：img-fluid mx-auto d-block的组合是正确的，不需要修改，它能保证图片自适应且居中。

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