如何用Bootstrap行与列实现响应式图片网格？

嘿，我来帮你搞定这个响应式图片网格！先看看你现有代码里的几个小问题，然后给你修正后的完整方案～

首先，你的代码里有几个容易忽略的语法错误：

• 每个col的<div>标签都没闭合，少了>和对应的</div>
• 列类名写错了，sm-12应该是col-sm-12，Bootstrap的列类必须遵循col-断点-宽度的格式
• 图片的scr是拼写错误，应该是src

接下来是修正后的完整代码，基于Bootstrap 5（目前最常用的版本），能完美实现你要的响应式效果：

<!-- 先确保页面头部已经引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container my-4">
  <!-- g-3 控制列之间的间距，数值可根据需求调整g-1到g-5 -->
  <div class="row g-3">
    <!-- 每一列：小屏幕及以下1列一行，中等屏幕4列一行 -->
    <div class="col-sm-12 col-md-3">
      <img class="img-thumbnail w-100" src="你的图片地址1.jpg" alt="图片描述1">
    </div>
    <div class="col-sm-12 col-md-3">
      <img class="img-thumbnail w-100" src="你的图片地址2.jpg" alt="图片描述2">
    </div>
    <div class="col-sm-12 col-md-3">
      <img class="img-thumbnail w-100" src="你的图片地址3.jpg" alt="图片描述3">
    </div>
    <div class="col-sm-12 col-md-3">
      <img class="img-thumbnail w-100" src="你的图片地址4.jpg" alt="图片描述4">
    </div>
    <!-- 可以继续添加更多图片列，会自动换行 -->
    <div class="col-sm-12 col-md-3">
      <img class="img-thumbnail w-100" src="你的图片地址5.jpg" alt="图片描述5">
    </div>
  </div>
</div>

关键细节说明： #

• 响应式逻辑：col-sm-12 col-md-3表示：
  • 当屏幕宽度≥576px（sm断点）时，每列占满整行（12份），也就是一行1张图
  • 当屏幕宽度≥768px（md断点）时，每列占3份（12÷3=4），所以一行4张图
• w-100类：强制图片占满所在列的宽度，避免图片大小不一导致网格错位
• g-3类：给行内的列添加水平和垂直间距，让网格布局更美观不拥挤
• container和my-4：container让内容在页面居中，my-4添加上下外边距，避免内容紧贴页面边缘
• img-thumbnail：保留你想要的图片缩略框样式，自带边框和圆角效果

如果你的项目用的是Bootstrap 4，只需要把g-3换成mx-n3，然后给每个col加px-3就行，其他逻辑基本一致。

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