Bootstrap 5移动端客户区域图片垂直堆叠问题求助

核心问题 #

Bootstrap 5.2 已移除 Bootstrap 3 中的 col-xs-* 类，你使用的 col-xs 类在 Bootstrap 5 中完全无效，这是导致移动端图片垂直堆叠的主要原因。Bootstrap 5 针对移动端（视口宽度 <576px）的栅格类为 col-*。

修复步骤 #

1. 替换无效栅格类
   将所有 col-xs-* 替换为 col-*：比如想在移动端每行显示2张图片，用 col-6；每行显示3张则用 col-4。
2. 搭配多端适配类
   结合 col-md-* 定义中等屏幕（≥768px）的布局，例如 col-6 col-md-3 表示移动端每行2张，中等屏幕及以上每行4张。
3. 设置图片响应式
   给图片添加 img-fluid 类，确保图片自适应容器宽度，避免溢出变形。

示例代码 #

<div class="container">
  <div class="row g-3"> <!-- g-3 用于设置列之间的间距 -->
    <div class="col-6 col-md-3">
      <img src="your-client-image.jpg" class="img-fluid" alt="客户展示图">
    </div>
    <div class="col-6 col-md-3">
      <img src="your-client-image.jpg" class="img-fluid" alt="客户展示图">
    </div>
    <div class="col-6 col-md-3">
      <img src="your-client-image.jpg" class="img-fluid" alt="客户展示图">
    </div>
    <div class="col-6 col-md-3">
      <img src="your-client-image.jpg" class="img-fluid" alt="客户展示图">
    </div>
  </div>
</div>

额外排查点 #

• 确认所有列元素都包裹在 row 容器内，Bootstrap 栅格系统依赖 row 来实现正确的布局逻辑。
• 若问题仍存在，检查自定义 CSS 是否覆盖了 Bootstrap 栅格样式，可通过浏览器开发者工具查看元素的样式优先级和盒模型。

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