Bootstrap 4能否为列添加间距？如何实现不换行的等间距？

嘿，这个问题我之前也踩过坑！Bootstrap 4确实没在文档里专门讲“添加”间距的操作，但其实有几种内置或自定义的方法能实现你要的效果，而且完全不会让列换行，也不用动flexbox的配置，我给你详细说说：

方法1：用Bootstrap 4.4+新增的g-*内置类 #

从Bootstrap 4.4版本开始，官方新增了专门控制gutter的类，直接给row标签加对应的类就行，非常省心：

• g-0：移除所有间距（就是文档里提到的情况）
• g-1到g-5：对应从小到大的间距数值，数值越大，列之间的空隙越宽

举个实际代码例子：

<div class="container">
  <div class="row g-3">
    <div class="col-md-4">第一列内容</div>
    <div class="col-md-4">第二列内容</div>
    <div class="col-md-4">第三列内容</div>
  </div>
</div>

这个方法完全遵循Bootstrap的网格逻辑，通过调整行的负边距和列的内边距来实现间距，根本不会触发列换行，也不用改任何flexbox属性，强烈推荐用这个！

方法2：给列加内置水平内边距类（适配所有Bootstrap 4版本） #

如果你的项目还在使用Bootstrap 4早期版本（没g-*类），那可以用内置的px-*系列类给列加水平内边距，但要注意别直接给列加外边距（会破坏网格宽度计算导致换行）。如果列有背景色，记得在列里面再套一层容器放内容，避免背景色延伸到间距区域：

<div class="container">
  <div class="row">
    <div class="col-md-4 px-2">
      <div class="bg-white p-3">第一列内容</div>
    </div>
    <div class="col-md-4 px-2">
      <div class="bg-white p-3">第二列内容</div>
    </div>
    <div class="col-md-4 px-2">
      <div class="bg-white p-3">第三列内容</div>
    </div>
  </div>
</div>

这里的px-2是水平方向的内边距，你可以根据需求换成px-1（小间距）、px-3（大间距）等，这样列之间就会产生均匀的空隙，而且总宽度不会超过容器，列自然不会换行。

方法3：自定义gutter类（灵活调整间距大小） #

如果内置的间距大小不符合你的需求，还可以自己写个简单的CSS类，原理和Bootstrap内置的gutter逻辑一致：

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

然后把这个类加到row上就行：

<div class="container">
  <div class="row custom-gutter">
    <div class="col-md-4">第一列内容</div>
    <div class="col-md-4">第二列内容</div>
    <div class="col-md-4">第三列内容</div>
  </div>
</div>

这里的18px可以换成你想要的任何数值，行的负边距用来抵消列的内边距，保证整个行的宽度和容器一致，列就不会因为间距而换行。

重要提醒 #

千万不要给col类加margin-left或margin-right！Bootstrap的网格是基于flexbox按比例分配宽度的，加外边距会让列的总宽度超过容器，直接导致换行，这也是很多人踩坑的原因。

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