如何使用Bootstrap 5栅格系统实现参考图布局并为网格添加图片

Bootstrap 5 基于12列栅格系统实现，要实现一行3个网格单元每个插入图片的效果，直接用等分列配置即可，适配不同设备的响应式规则也可以通过栅格断点灵活调整。

核心实现逻辑 #

• 外层套container/container-fluid类的容器，控制整体布局的最大宽度和左右边距
• 容器内加row类的行容器，用于包裹所有列单元，自动抵消容器的默认padding
• 每个图片网格单元加col-md-4类：12列栅格下每列占4份宽度，正好一行展示3个，md断点代表屏幕宽度≥768px时生效，小于该宽度时自动堆叠为单列展示，也可以根据需求更换为sm/lg等其他断点
• 图片加img-fluid类，实现自适应列宽，不会出现溢出或者拉伸变形的问题

完整代码示例 #

<div class="container my-4">
  <!-- g-3 是栅格间距配置，可根据需求调整为0-5的数值，gx-*控制水平间距 gy-*控制垂直间距 -->
  <div class="row g-3">
    <!-- 第一个网格单元 -->
    <div class="col-md-4 col-12">
      <img src="替换为你的图片路径" class="img-fluid w-100 rounded" alt="图片说明文本">
      <!-- 如果需要加图片下方的标题/描述，直接在这里加对应的文本元素即可 -->
    </div>
    <!-- 第二个网格单元 -->
    <div class="col-md-4 col-12">
      <img src="替换为你的图片路径" class="img-fluid w-100 rounded" alt="图片说明文本">
    </div>
    <!-- 第三个网格单元 -->
    <div class="col-md-4 col-12">
      <img src="替换为你的图片路径" class="img-fluid w-100 rounded" alt="图片说明文本">
    </div>
    <!-- 后续更多三列布局直接追加列单元即可，Bootstrap会自动换行 -->
    <div class="col-md-4 col-12">
      <img src="替换为你的图片路径" class="img-fluid w-100 rounded" alt="图片说明文本">
    </div>
    <div class="col-md-4 col-12">
      <img src="替换为你的图片路径" class="img-fluid w-100 rounded" alt="图片说明文本">
    </div>
    <div class="col-md-4 col-12">
      <img src="替换为你的图片路径" class="img-fluid w-100 rounded" alt="图片说明文本">
    </div>
  </div>
</div>

额外配置说明 #

• 如果需要固定图片展示的宽高比，可以给列内部加一个固定高度的容器，给图片加object-fit: cover的样式，避免图片拉伸
• 不需要响应式布局要所有尺寸下都展示三列的话，直接把col-md-4替换为col-4即可
• 代码里的rounded类是给图片加圆角，不需要可以直接删除

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