Bootstrap行内Div间距设置问题：添加间距后行溢出

这个问题我碰到过好多次啦——Bootstrap的row和col体系是靠预设的宽度比例、内边距（padding）以及row的负margin来维持布局平衡的，直接给col元素加margin会让总宽度超过容器，自然就溢出了。下面给你几个实用的解决方案，按推荐程度排序：

1. 用Bootstrap 5+的gap属性（最简单省心） #

Bootstrap 5之后的row默认是flex容器，支持CSS的gap属性，直接给row加个间距类或者自定义gap值，就能自动在列之间生成均匀的间距，完全不会触发溢出：

<div class="row gap-2"> <!-- gap-2对应0.5rem的间距，你也可以用gap-3/gap-4，或者直接写style="gap: 5px;" -->
  <div class="col-md-4 section"> hello </div>
  <div class="col-md-4 section"> hello </div>
  <div class="col-md-4 section"> hello </div>
</div>

<style>
.section{ background-color: red; }
/* 不用再额外加margin了，gap已经帮你搞定所有间距 */
</style>

2. 给列套外层容器（兼容Bootstrap 4及更早版本） #

如果还在使用旧版Bootstrap，别直接给col加margin，给每个col套一层额外的div，把margin加在这个外层div上就不会影响col的宽度计算了：

<div class="row">
  <div class="col-md-4">
    <div class="section"> hello </div>
  </div>
  <div class="col-md-4">
    <div class="section mx-2"> hello </div> <!-- mx-2是Bootstrap内置的左右margin类，对应0.5rem -->
  </div>
  <div class="col-md-4">
    <div class="section"> hello </div>
  </div>
</div>

<style>
.section{ background-color: red; }
/* 要是不想用内置类，也可以自己写：.section:not(:first-of-type):not(:last-of-type) { margin: 0 5px; } */
</style>

3. 自定义宽度计算（不推荐，仅作补充） #

如果你非得直接给col加margin，那只能用calc()手动调整列的宽度，抵消margin带来的宽度增量，但这种方式需要精确计算，后续改布局很麻烦：

<div class="row">
  <div class="col-md-4 section first"> hello </div>
  <div class="col-md-4 section middle"> hello </div>
  <div class="col-md-4 section last"> hello </div>
</div>

<style>
.section{ background-color: red; }
.section.first {
  width: calc(33.333% - 5px);
  margin-right: 5px;
}
.section.last {
  width: calc(33.333% - 5px);
  margin-left: 5px;
}
.section.middle {
  width: calc(33.333% - 10px);
  margin: 0 5px;
}
</style>

总的来说，优先选方案1（用Bootstrap 5+的话）或者方案2（旧版本），这俩更贴合Bootstrap的设计思路，也更容易维护。

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