Bootstrap5如何实现col-12图片下方排列3个col-4的图片？

问题成因 #

• 默认container为响应式固定宽度类，不同断点下的宽度值与需要的600px总布局宽度不匹配，网格列宽计算基准出错。
• 仅给图片添加img-fluid只设置了max-width:100%，当图片原生宽度（200px）小于所在列宽度时，图片不会自动撑满列，加上g-3槽宽占位，就会出现排列错位、间隙不均的异常效果。
• 两个独立row虽然放在同一个容器下，但容器宽度没有和主图宽度对齐，上下区域的宽度计算基准不一致。

修复后代码 #

<div class="mx-auto text-center pt-5" style="max-width: 600px;">
  <!-- 顶部全宽主图 -->
  <div class="row">
    <div class="col-12">
      <img class="img-fluid pb-2 w-100" src="./images/01.jpg" alt="顶部主图">
    </div>
  </div>
  <!-- 下方三列缩略图 -->
  <div class="row g-3">
    <div class="col-4">
      <img class="img-fluid w-100" src="./images/02.jpg" alt="缩略图1">
    </div>
    <div class="col-4">
      <img class="img-fluid w-100" src="./images/03.jpg" alt="缩略图2">
    </div>
    <div class="col-4">
      <img class="img-fluid w-100" src="./images/04.jpg" alt="缩略图3">
    </div>
  </div>
</div>

调整点说明 #

• 替换默认container为带mx-auto（水平居中）、固定max-width: 600px的容器，完全匹配顶部主图原生宽度，保证上下两个row的宽度计算基准一致。
• 所有图片添加w-100类，强制图片占满所在列的全部可用宽度，消除图片原生尺寸不足导致的排列偏移。
• 原有网格结构、g-3间距设置、col-12/col-4列划分逻辑完全保留，无需重构代码即可实现预期的上1下3、间距均匀的排版效果。

如果需要做响应式自适应而非固定600px宽度，可将固定宽度容器替换为container-md等对应断点的响应式容器类，只要保证两个row处于同一宽度约束容器内、图片添加w-100，就不会出现排列异常。

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