Bootstrap 4列布局问题：多列块之间无间距

我帮你分析下这个问题——Bootstrap 4的栅格系统本身是靠列（.col-*）自带的左右内边距（也就是gutter）来实现列间距的，但你直接修改列的padding反而搞砸了，大概率是破坏了它原生的布局逻辑。

先给你几个靠谱的解决方案，按推荐程度排序：

1. 用内层容器+Bootstrap间距类（最稳妥） #

Bootstrap的设计思路就是让列作为布局容器，内部放实际内容块。你可以给每个列里的内容加个内层div，然后用Bootstrap自带的间距类（比如p-3、mx-2）来控制间距，完全不会破坏栅格布局：

<section class="jobs">
  <div class="container">
    <div class="row">
      <!-- 第一个列 -->
      <div class="col-md-4">
        <div class="job-content p-3">
          <!-- 你的列内容 -->
        </div>
      </div>
      <!-- 第二个列 -->
      <div class="col-md-4">
        <div class="job-content p-3">
          <!-- 你的列内容 -->
        </div>
      </div>
      <!-- 第三个列 -->
      <div class="col-md-4">
        <div class="job-content p-3">
          <!-- 你的列内容 -->
        </div>
      </div>
    </div>
  </div>
</section>

这里的p-3是给内层div加上下左右内边距，如果你只想加左右间距，用px-3就行；要是想加外边距，用mx-2（左右margin）也可以。

2. 用.row的gutter类（Bootstrap 4.4+适用） #

如果你用的是Bootstrap 4.4及以上版本，可以直接给.row加g-*类来调整列间距，比如row g-3，这样列之间的间距会统一变大，不用额外加内层div：

<div class="row g-3">
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
</div>

g-3是预设的间距大小，你还可以用g-0到g-5，或者自定义数值比如g-4。

3. 自定义CSS（不推荐，除非必要） #

如果你不想用上面两种方法，非要直接改列的样式，千万别直接动.col-*的padding！因为Bootstrap的.row有负左右margin，和列的padding是配套的，改了padding会导致内容超出容器或者布局错位。正确的做法是给列加margin，同时用calc调整宽度：

@media (min-width: 768px) {
  .jobs .col-md-4 {
    margin: 0 10px;
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
  }
}

这里的20px是左右margin的总和（10px*2），这样列的总宽度加起来还是100%，不会换行。

为啥你修改padding会更糟？ #

因为Bootstrap的.row默认有margin-left: -15px; margin-right: -15px;，用来抵消列默认的padding-left: 15px; padding-right: 15px;，这样列的内容才能和容器的边缘对齐。如果你把列的padding去掉，.row的负margin就会让列的内容直接超出容器，看起来就乱了。

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