Bootstrap 4中no-gutters类及对应CSS无法消除列间距问题

我之前也踩过Bootstrap列间距的坑，特别理解你想让所有图片间距完全统一的需求。你说加了no-gutters没效果，大概率是细节上没处理到位，咱们一步步来排查解决：

1. 先确认no-gutters的正确使用姿势 #

首先要确保no-gutters是直接加在.row容器上，它的作用是移除row的负margin和所有子列（.col-*）的左右padding。如果你的结构里列嵌套了其他容器，这个样式可能就没生效。正确的基础结构应该是这样：

<div class="row no-gutters">
  <div class="col-6">
    <img src="img1.jpg" class="img-fluid" alt="图1">
  </div>
  <div class="col-6">
    <img src="img2.jpg" class="img-fluid" alt="图2">
  </div>
  <div class="col-6">
    <img src="img3.jpg" class="img-fluid" alt="图3">
  </div>
  <div class="col-6">
    <img src="img4.jpg" class="img-fluid" alt="图4">
  </div>
</div>

2. 清除图片自身的间距 #

有时候图片本身可能带有默认的margin或者padding，或者你给图片加了额外的类导致间距出现。这时候可以用自定义CSS强制重置：

/* 针对no-gutters行里的列内图片 */
.row.no-gutters .col-6 img {
  margin: 0;
  padding: 0;
  width: 100%; /* 确保图片完全占满列宽，避免留白 */
  display: block; /* 移除图片默认的行内元素间距 */
}

3. 处理行与行之间的间距（如果是多行布局） #

如果你的图片是分多个.row排列的，默认的row会有margin-bottom，导致行与行之间的图片间距和列之间的不一致。这时候可以移除行的上下margin：

.row.no-gutters {
  margin-top: 0;
  margin-bottom: 0;
}
/* 如果是连续的no-gutters行，移除它们之间的间距 */
.row.no-gutters + .row.no-gutters {
  margin-top: 0;
}

4. 排查是否有自定义CSS覆盖了Bootstrap样式 #

有时候咱们自己写的CSS优先级比Bootstrap的高，会把no-gutters的样式覆盖掉。可以打开浏览器开发者工具，检查.row.no-gutters和.col-6的padding、margin属性，看看是不是有其他样式在生效。

按照这几步调整下来，应该就能让所有图片的间距完全一致了。

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