gx-/gy-类必须加在.row上才生效，因Bootstrap 5的gutter机制依赖.row的负margin与.col的正padding协同，通过CSS变量--bs-gutter-x/y触发；加在.col等其他元素无效。
gx- / gy- 类必须加在 .row 上才生效
Bootstrap 5 的 gutter 机制依赖 .row 的负 margin 和 .col 的正 padding 协同抵消，这个配对逻辑只在 .row 元素上被 CSS 变量 --bs-gutter-x 和 --bs-gutter-y 触发。加在 .col 或任意其他元素上，DevTools 里根本看不到变量注入，间距也不会变。
常见错误包括：
-
<div class="col-6 gx-3">—— 完全无效，gx-3不会作用于.col - React-Bootstrap 中传
className="gx-3"，但组件未透传到原生<div class="row">—— 类名被吃掉 - 嵌套
.row时，外层的gx-3不会继承给内层，必须单独加gx-0或gx-1
响应式 gutter 要写全断点类，不能只写“生效”的那个
Bootstrap 不会自动清空未声明断点的默认值。你只写 gx-md-3，小屏（xs/sm）下仍用默认 gx-2（即 0.5rem），不是“中屏才有”，而是“小屏有默认、中屏叠加”。
想实现「小屏无间隙、中屏 1rem、大屏 1.5rem」，必须显式写：
<div class="row gx-0 gx-md-3 gx-lg-4">
注意：
-
gx-0是兜底，清除所有断点（含 xs）的水平 gutter - 断点名必须严格为
xs/sm/md/lg/xl/xxl；g-sx-3或gx-small-3会被忽略 - 顺序无关，但缺一不可；
gx-md-3不会覆盖 xs 下的值
别用 px-、m-、p- 模拟 gutter
px-3 只加 .col 的左右 padding，不碰 .row 的负 margin，结果是整行向右偏移 1rem，小屏换行错乱甚至触发横向滚动条。m-0 更危险：它直接清掉 .row 必需的负左右 margin，列不再贴边，布局基线彻底失衡。
真正安全的清除方式只有：
-
gx-0：同步重置.row的负 margin 和.col的 padding，保持配对 -
gy-0：同理，用于垂直方向 -
g-0：等价于gx-0 gy-0，同时清空水平+垂直
而 no-gutters 在 Bootstrap 5 中已废弃，写了也无样式规则。
全局改默认值？必须重编译 Sass，且仅限统一规范场景
修改 $grid-gutter-width 只影响 Sass 编译流程：它仅用于初始化 $gutters map，不控制运行时行为。改了变量但没重编译，或 @import 写在变量声明之后，页面都不会变化。
若真要全局统一（比如全站 gutter 改为 12px），三件事缺一不可：
-
$grid-gutter-width: 0.75rem必须写在所有@import语句之前，且在@import "bootstrap/scss/variables"前就已声明 - 确保构建流程完整导入了 Bootstrap SCSS 入口（如
@import "bootstrap/scss/bootstrap"） - 若新增了自定义断点（如
xl2: 1400px），必须同步调用@include generate-gutter-classes()，否则gx-xl2-3不会生成
局部调整永远优先用 gx-* 类；动变量是重操作，意味着你接受整套 Sass 构建约束，不是改个数字就能跑起来的事。
