如何在Bootstrap中为行和列添加间距且不破坏布局？

1. 优先用Bootstrap内置的Gutter类 #

Bootstrap 5原生提供了g-*系列类（如g-2、g-3、g-4），直接添加到row元素上就能控制列之间的水平/垂直间距，完全不会破坏栅格布局——因为它是通过调整列的内边距和行的负外边距实现的，不会影响列的宽度计算。

示例代码：

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

2. 别直接给列加margin #

你遇到的布局崩溃，本质是直接给col-4加margin后，列的总宽度超过了12栅格的限制，被迫换行。如果需要给列内部的内容加间距，应该给列里的子元素（比如卡片容器）加p-*（内边距）或m-*（外边距），而不是直接作用在col-*上。

3. 自定义间距用CSS变量 #

如果内置的g-*类满足不了需求，可以通过自定义CSS变量来调整：

.row-custom-gap {
  --bs-gutter-x: 2rem; /* 自定义水平间距 */
  --bs-gutter-y: 1.5rem; /* 自定义垂直间距 */
}

然后把这个类加到row上：

<div class="row row-custom-gap">
  <div class="col-4">自定义间距内容</div>
</div>

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