bootstrap 5 通过修改 sass 变量（如 $grid-gutter-width）或使用响应式工具类（如 g-3、g-md-4）调整 gutter，必须作用于 .row 元素；错误加在 .col 或使用旧版会导致失效，精细控制推荐 display: grid + gap。
修改 bootstrap 5 的 gutter 值（列间距）
bootstrap 5 默认用 gutter 控制栅格列之间的水平/垂直间距，它本质是给 .row 设置负的 margin，再给 .col 设置对应的 padding。改间距不是调某个 class，而是改 css 变量或 sass 变量。
最直接的方式是在自定义 Sass 中覆盖 $grid-gutter-width（全局默认值），或用响应式变量如 $grid-gutter-width-xs、$grid-gutter-width-md 等：
$grid-gutter-width: 1.5rem; // 全局设为 24px $grid-gutter-width-md: 2rem; // 从 md 起变为 32px @import "bootstrap/scss/bootstrap";
编译后所有 .row 的 --bs-gutter-x 和 --bs-gutter-y 会同步更新。
用工具类快速调整单个 row 的间距
Bootstrap 5 提供了响应式 g-* 工具类，比如 g-3、g-md-4，它们直接设置 CSS 变量 --bs-gutter-x/--bs-gutter-y，优先级高于全局变量，适合局部微调。
-
g-0：移除所有行列间距（注意：不是“变小”，是彻底清零） -
g-2：设为0.5rem（8px），对应变量$spacer * .5 -
g-lg-5：仅在lg断点及以上生效，值为3rem
这些类作用于 .row 元素，对子 .col 无须额外处理——框架已通过 padding/margin 配对抵消。
为什么加了 g-* 没反应？常见失效原因
典型表现是列贴边、文字换行错乱、背景色溢出。根本原因是：你可能把 g-* 加在了 .col 上，或者用了旧版 Bootstrap（v4 不支持 g-*，只支持 mx-n* 手动模拟）。
-
g-*类必须加在.row上，不能加在.col或容器外层 - 检查是否引入的是 Bootstrap 5+ CSS/JS；v4 中写
g-3会被完全忽略 - 如果项目用了 CSS-in-JS 或 Shadow DOM，CSS 变量可能未穿透，此时需手动覆写
--bs-gutter-x - 某些 UI 库（如 React-Bootstrap）若封装了
Row组件，需确认它透传了原生 class
想让不同列有不同间距？别硬改栅格
Bootstrap 栅格的设计前提是“整行统一 gutter”。如果需要某两列之间特别宽、其余窄，强行改 .col 的 padding 会破坏响应式断点逻辑，导致 col-md-6 在小屏下不占满、或 order 错位。
更稳妥的做法：
- 用
ms-auto/me-auto或mx-*在特定.col内部加空白（不影响栅格计算） - 把需要特殊间距的区块抽成独立
.row，各自设g-* - 真要精细控制，放弃
.row/.col，改用display: grid+gap，Bootstrap 的g-*工具类其实也是靠这个实现的
变量、工具类、手写样式三层能力是递进关系，但越往后越容易和断点、嵌套、自动换行产生冲突。改之前先问一句：这个间距差异，是不是真的必须由栅格系统承担？
