如何在Bootstrap中增加第一行图片高度？附现有实现代码

嘿，我来帮你搞定这个问题！要给Bootstrap栅格布局里第一行的图片增加高度，有几个简单实用的方案，我给你详细说说：

方法一：给第一行图片容器加自定义CSS类（推荐） #

这种方式最灵活，也符合代码规范。首先给第一行的三个列容器都加上一个自定义类，比如first-row-img，然后通过CSS设置图片高度：

修改后的HTML代码 #

<div class="row">
  <div class="col-md-3 first-row-img">
    <img class="img-responsive" src="img1.jpg">
  </div>
  <div class="col-md-6 first-row-img">
    <img class="img-responsive" src="img3.jpg">
  </div>
  <div class="col-md-3 first-row-img">
    <img class="img-responsive" src="img5.jpg">
  </div>
  <!-- 第二行及后续代码 -->
  <div class="col-md-3">
    <img class="img-responsive" src="img2.jpg">
  </div>
  <div class="col-md-6">
    <...>
  </div>
</div>

对应的CSS代码 #

.first-row-img img {
  height: 400px; /* 这里替换成你想要的高度值 */
  object-fit: cover; /* 关键！保持图片比例，避免拉伸变形 */
  width: 100%; /* 确保图片占满容器宽度 */
}

object-fit: cover会让图片按比例裁剪，填满设定的高度和宽度，不会出现扭曲的情况，非常实用。

方法二：内联样式快速调试 #

如果你只是想快速测试效果，不想写额外的CSS文件，可以直接给第一行的图片添加内联样式：

<div class="row">
  <div class="col-md-3">
    <img class="img-responsive" src="img1.jpg" style="height: 400px; object-fit: cover; width: 100%;">
  </div>
  <div class="col-md-6">
    <img class="img-responsive" src="img3.jpg" style="height: 400px; object-fit: cover; width: 100%;">
  </div>
  <div class="col-md-3">
    <img class="img-responsive" src="img5.jpg" style="height: 400px; object-fit: cover; width: 100%;">
  </div>
  <!-- 第二行及后续代码 -->
</div>

这个方法适合临时调试，正式项目里还是推荐用方法一，方便后期维护。

小提示：Bootstrap版本兼容 #

如果你的项目用的是Bootstrap 4或更高版本，img-responsive已经被替换成img-fluid类了，建议同步替换，这样能更好地适配新版本的响应式特性。

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