Bootstrap图片画廊布局显示异常，如何实现指定占比的2行卡片排版

问题根因 #

• 栅格错位：6张卡片全部放在同一个row容器内，Bootstrap 栅格默认基于浮动（v3及更低版本）或弹性盒布局，当上一行内的列高度不一致时，后续行的元素会被高度更高的前序列卡住，无法对齐到行首。
• 图片拉伸：未给图片设置容器适配规则，图片默认按原始尺寸渲染，强制放缩到容器大小时就会出现拉伸变形。

解决方案 #

1. 拆分独立行容器：将前3张卡片放在第一个row容器，后3张卡片放在第二个row容器，从结构上强制分行，彻底避免错位问题。
2. 图片自适应适配：给所有img标签添加 Bootstrap 内置的img-fluid类实现宽度随容器自适应，同时添加object-fit: cover属性，让图片按原始比例填充容器，多余部分自动裁剪，不会出现拉伸。

修改后代码 #

<div className="container">
  {/* 第一行 */}
  <div className="row">
    <div className="col-md-6 col-sm-6">
      <img className="img-fluid" style={{minHeight:"280px", objectFit: "cover"}} src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" alt="画廊图片"/>
    </div>
    <div className="col-md-3 col-sm-6">
      <img className="img-fluid" style={{minHeight:"280px", objectFit: "cover"}} src="https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg" alt="画廊图片"/>
    </div>
    <div className="col-md-3 col-sm-6">
      <img className="img-fluid" style={{minHeight:"280px", objectFit: "cover"}} src="https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg" alt="画廊图片"/>
    </div>
  </div>
  {/* 第二行 */}
  <div className="row">
    <div className="col-md-3 col-sm-6">
      <img className="img-fluid" style={{minHeight:"280px", objectFit: "cover"}} src="https://i.pinimg.com/originals/cc/18/8c/cc188c604e58cffd36e1d183c7198d21.jpg" alt="画廊图片"/>
    </div>
    <div className="col-md-3 col-sm-6">
      <img className="img-fluid" style={{minHeight:"280px", objectFit: "cover"}} src="https://images.unsplash.com/photo-1454372182658-c712e4c5a1db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="画廊图片"/>
    </div>
    <div className="col-md-6 col-sm-6">
      <img className="img-fluid" style={{minHeight:"280px", objectFit: "cover"}} src="https://wallpaperaccess.com/full/1376490.jpg" alt="画廊图片"/>
    </div>
  </div>
</div>

如果你不想拆分row，也可以在第一行最后一列后面添加清除浮动的元素<div className="clearfix d-md-block"></div>，同样可以解决错位问题，拆分row的方式可读性和兼容性更好。

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