如何在Bootstrap中为三个col-4的Div添加间距且不换行？

嘿，这个问题我太熟了！之前用Bootstrap做卡片布局的时候也踩过这个坑。本质原因是：Bootstrap的网格系统是基于12列宽度计算的，col-4已经占了容器宽度的1/3（4/12），当你给每个col加margin-left:5px后，三个col的总宽度（31/3 + 25px，因为中间有两个间距）就超过了100%，自然会被挤到下一行。

下面给你几个靠谱的解决办法，按推荐程度排序：

方法1：用Bootstrap内置的Gutter类（最推荐） #

Bootstrap从版本5开始提供了g-*系列类，专门用来设置列之间的间距，这是官方设计的标准方案，完全不会破坏网格布局的逻辑。

你只需要给包裹col的row加上g-*类（比如g-2、g-3，数字越大间距越大），它会通过给row加负margin、给col加左右padding的方式实现间距，完美适配12列系统：

<div class="row g-3">
  <div class="col-4">
    <!-- 卡片内容 -->
  </div>
  <div class="col-4">
    <!-- 卡片内容 -->
  </div>
  <div class="col-4">
    <!-- 卡片内容 -->
  </div>
</div>

如果是Bootstrap 4，也可以用no-gutters配合自定义padding，或者用mx-*类，但还是推荐升级到5用gutter更方便。

方法2：自定义宽度配合margin（适合特殊间距需求） #

如果你一定要手动用margin来控制间距，就得调整col的宽度，用calc()计算出刚好能放下的宽度。比如你要每个col之间有5px的间距，三个col会有2个间距，总额外宽度是10px，需要把这个宽度分摊到三个col上：

每个col的宽度应该是 calc(33.333% - (5px * 2)/3)，也就是calc(33.333% - 3.333px)。同时给row加负margin来抵消第一个col的margin-left，保证整体对齐：

<div class="row" style="margin-left: -5px;">
  <div class="col" style="width: calc(33.333% - 3.333px); margin-left: 5px;">
    <!-- 卡片内容 -->
  </div>
  <div class="col" style="width: calc(33.333% - 3.333px); margin-left: 5px;">
    <!-- 卡片内容 -->
  </div>
  <div class="col" style="width: calc(33.333% - 3.333px); margin-left: 5px;">
    <!-- 卡片内容 -->
  </div>
</div>

这样总宽度刚好是100%，不会换行。

方法3：给col套外层容器加margin（兼容旧版本） #

另一种思路是把每个col-4放在一个外层div里，给外层div加margin，而col本身保持col-4的宽度。这样col的宽度计算不受margin影响，外层div的margin只会影响整体的间距：

<div class="row">
  <div style="margin-left: 5px; box-sizing: border-box;">
    <div class="col-4">
      <!-- 卡片内容 -->
    </div>
  </div>
  <div style="margin-left: 5px; box-sizing: border-box;">
    <div class="col-4">
      <!-- 卡片内容 -->
    </div>
  </div>
  <div style="margin-left: 5px; box-sizing: border-box;">
    <div class="col-4">
      <!-- 卡片内容 -->
    </div>
  </div>
</div>

记得给外层div加上box-sizing: border-box;，避免宽度溢出。

总的来说，优先用方法1，官方方案最稳定省心；如果有特殊的间距需求，再考虑方法2或3。

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