Bootstrap 4网格列间距设置问题：如何添加列间空白？

嘿，这个问题我太熟悉了！Bootstrap 4砍掉了thumbnail组件之后，很多人都会碰到网格列间距的坑——直接加mx-3这类外边距很容易让最后一列换行错位对吧？别担心，这里有几个靠谱的解决办法：

方案1：利用Bootstrap内置的Gutter间距机制 #

Bootstrap 4的.row和.col-*本身就自带间距逻辑：

• .row默认带有负的左右外边距，用来抵消列的内边距，保证整体宽度不会超出容器
• .col-*默认有左右内边距，这就是列与列之间的间距来源

如果你之前没看到间距，可能是不小心加了.no-gutters类在row上，或者重置了列的padding。只要去掉.no-gutters，默认的间距就会回来。如果需要自定义间距大小，可以给列加px-2/px-3这类内边距类，比如：

<div class="row">
  <% camps.forEach(camp => { %>
    <div class="col-md-4 px-3 mb-3">
      <!-- 你的营地内容 -->
    </div>
  <% }) %>
</div>

这种方式完全不会导致最后一列错位，因为row的负外边距会抵消列的内边距，整体宽度刚好匹配容器。

方案2：用Card组件替代Thumbnail（官方推荐） #

Bootstrap 4里的Thumbnail就是被Card组件取代的，直接把你的营地内容放到Card里，再嵌入网格列，天然就能解决间距问题：

<% include partials/header %>
<div class="container">
  <div class="row">
    <% camps.forEach(camp => { %>
      <div class="col-md-4 mb-4"> <!-- mb-4给每行的卡片加底部间距 -->
        <div class="card h-100"> <!-- h-100让卡片高度一致，可选 -->
          <img src="<%= camp.image %>" class="card-img-top" alt="<%= camp.name %>">
          <div class="card-body">
            <h5 class="card-title"><%= camp.name %></h5>
            <p class="card-text"><%= camp.description %></p>
          </div>
        </div>
      </div>
    <% }) %>
  </div>
</div>

Card组件本身不会额外增加宽度，列的内边距会自动形成列之间的横向间距，mb-4则负责纵向间距，完美避开错位问题，还能获得Bootstrap自带的卡片样式，一举两得。

方案3：自定义Gutter间距（适合特殊需求） #

如果需要比默认更大的间距，可以自定义row和列的边距/内边距：

.custom-gutter {
  margin-right: -20px;
  margin-left: -20px;
}
.custom-gutter > .col {
  padding-right: 20px;
  padding-left: 20px;
}

然后把row替换成row custom-gutter，列用col-md-4即可，调整CSS里的数值就能控制间距大小，同样不会出现溢出错位。

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