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