Bootstrap 5 的 gutter 类必须加在 .row 上，如 gx-md-3，加在 .col 上无效；其机制依赖 .row 的负 margin 和 .col 的正 padding 协同，且需显式覆盖各断点默认值（如 gx-0 gx-md-3 gx-lg-4），自定义断点需手动调用 mixin 生成类。
bootstrap 5 的断点 gutter 必须写在 .row 上，用 gx-{breakpoint}-{size} 或 gy-{breakpoint}-{size}，加在 .col 或其他元素上完全无效。
gutter 类只能加在 .row 上，否则 DevTools 里根本看不到 --bs-gutter-x
Bootstrap 5 的 gutter 是靠 .row 的负 margin 和 .col 的正 padding 配对实现的，这个机制只认 .row 直接子元素是 .col 的结构。一旦你把 gx-md-3 写在 .col 上，CSS 自定义变量 --bs-gutter-x 根本不会被注入，浏览器也无从计算间距。
<div class="row gx-md-3"><div class="col-6">✅ 正确：变量生效，列间出现 1rem 间距<div class="row"><div class="col-6 gx-md-3">❌ 无效：DevTools 中查不到 --bs-gutter-x，间距照旧- React-Bootstrap、NextUI 等封装组件要确认
className是否透传到原生<div class="row">，否则类名被吃掉等于没写
响应式写法必须显式覆盖默认值，不能只写大屏类
默认情况下，.row 在所有断点都带 gx-2（即 --bs-gutter-x: 0.5rem）。如果你只写 gx-md-3，小屏（xs/sm）仍会沿用默认值，不是“小屏无间距、中屏有间距”，而是“小屏 0.5rem、中屏起 1rem”。
- 想实现“小屏无间隙、中屏 1rem、大屏 1.5rem”，得写：
gx-0 gx-md-3 gx-lg-4 - 顺序无关，但缺一不可；
gx-0是为了清掉 xs 下的 fallback 值 - 断点名必须严格匹配：
xs、sm、md、lg、xl、xxl；g-sx-3或g-small-3会被忽略
别碰 px-* 类调 gutter，它会破坏宽度对齐
手动给 .col 加 px-0 或 ps-3 看似能“调间距”，实际只是改了 padding，而 .row 的负 margin 还在——结果就是整行向左偏移、右侧留白、小屏下换行错乱。
- 错误示范：
<div class="col-6 px-0 px-lg-2">→ 大屏 padding 值和默认 gutter 不等价，视觉不对齐 - 正确替代：用
gx-0 gx-lg-2，它会同步调整.row的负 margin 和.col的 padding - 如果某列需要破格（比如全宽 banner），建议抽离出
.row，再用ms-n3 me-n3对齐原有 gutter 宽度
自定义断点时，gutter 类不会自动编译出来
如果你改了 $grid-breakpoints，比如新增 xs: 0, sm: 480px，那么 gx-xs-2 这种类名压根不会出现在 CSS 文件里，除非你主动调用 @include generate-gutter-classes()。
- 只改 Sass 变量
$grid-gutter-width不够，它只影响全局默认值，不生成新类名 -
gx-sm-2能用，是因为 Bootstrap 默认已为sm断点生成了对应类；gx-xs-2不存在，除非你补上生成逻辑 - 第三方构建工具（如 Vite + Sass）需确保该 mixin 被执行，否则自定义断点下的 gutter 工具类就是空壳
最常被忽略的是：gutter 是 row-col 协同机制，不是单个元素样式。只要类没加对地方，或者没覆盖默认 fallback，就永远调不准。调试时先打开 DevTools 查 --bs-gutter-x 是否存在、值是否符合预期，比猜更省时间。
