最推荐直接修改css变量--bs-gutter-x或--bs-gutter-y，轻量且无需sass编译；gutter类必须作用于.row元素，通过负margin与正padding配对实现列间距，响应式需用gx-{breakpoint}-{size}写法，全局修改则调整sass变量$grid-gutter-width并重新编译。
直接改 --bs-gutter-x 或 --bs-gutter-y 是最轻量、最推荐的自定义方式，它不依赖 Sass 编译，也不需要动源码，适用于运行时动态调整或局部覆盖。
gutter 类必须加在 .row 上才生效
Bootstrap 5 的列间距靠 .row 的负 margin 和 .col 的正 padding 配对实现，这个机制只对 .row 的直接子元素是 .col 时起作用。
-
gx-3、gy-2、g-lg-4这些类必须写在<div class="row gx-3"> 上，写在 <code><div class="col-6 gx-3"> 里完全无效 <li>React-Bootstrap 等封装组件要确认是否把 <code>className透传到原生<div class="row">，否则类名会被吃掉 <li>手动给 <code>.row加style="margin: 0"会破坏对齐基线，打印或缩放时容易错位
响应式 gutter 要用 gx-{breakpoint}-{size} 写法
想实现“小屏无间隙、中屏有 1rem、大屏变 1.5rem”，直接写：
<div class="row gx-0 gx-md-3 gx-lg-4"> <p>它会生成对应 CSS 变量：<code>--bs-gutter-x: 0</code>、<code>--bs-gutter-x: 1rem</code>、<code>--bs-gutter-x: 1.5rem</code>，且优先级高于全局 Sass 变量。</p> <ul> <li> <code>gx-sm-2</code> 表示从 <code>sm</code> 断点（≥576px）起生效；<code>gx-md-0</code> 表示从 <code>md</code>（≥768px）起取消水平 gutter</li> <li>如果自定义了断点（比如新增 <code>xs: 0, sm: 480px</code>），必须同步调用 <code>@include generate-gutter-classes()</code>，否则 <code>gx-xs-2</code> 这类类名压根不会被编译出来</li> <li>别用 <code>px-3</code> 模拟 gutter：它只加 <code>.col</code> 的 padding，不抵消 <code>.row</code> 的负 margin，结果是整行向左偏移 15px，布局失衡</li> </ul> <h3>全局修改要动 Sass 变量 <code>$grid-gutter-width</code> </h3> <p>如果项目中几十个 <code>.row</code> 都要统一改成 12px 间距，一个个加 <code>gx-2</code> 很累，这时该改源头变量——但必须重新编译整个 Bootstrap。</p> <ul> <li>在自定义 Sass 中，把 <code>$grid-gutter-width: 0.75rem;</code>（即 12px）写在 <code>@import "bootstrap/scss/bootstrap";</code> 之前</li> <li>也可以用响应式变量细分：<code>$grid-gutter-width-md: 1rem;</code>、<code>$grid-gutter-width-lg: 1.5rem;</code> </li> <li>改完后所有 <code>.row</code> 的 <code>--bs-gutter-x</code> 和 <code>--bs-gutter-y</code> 会同步更新，但注意：这会影响所有栅格行为，包括 <code>row-cols-*</code> 和嵌套 <code>.row</code> </li> </ul> <p>真正容易被忽略的是：gutter 控制的是「列之间」的空隙，不是「内容与列边框之间」的距离。如果你看到列内文字贴边，该调的是 <code>.col</code> 里的 <code>px-3</code> 或自定义 padding，而不是去碰 <code>gx-</code> —— 后者一动，整个栅格对齐就可能偏移。 </p> </div>
