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 间距<li><code><div class="row"><div class="col-6 gx-md-3">❌ 无效：DevTools 中查不到 --bs-gutter-x，间距照旧<li>React-Bootstrap、NextUI 等封装组件要确认 <code>className是否透传到原生<div class="row">，否则类名被吃掉等于没写<h3>响应式写法必须显式覆盖默认值，不能只写大屏类</h3> <p>默认情况下，<code>.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 不等价，视觉不对齐<li>正确替代：用 <code>gx-0 gx-lg-2，它会同步调整.row的负 margin 和.col的 padding - 如果某列需要破格（比如全宽 banner），建议抽离出
.row，再用ms-n3 me-n3对齐原有 gutter 宽度 - 只改 Sass 变量
$grid-gutter-width不够，它只影响全局默认值，不生成新类名 -
gx-sm-2能用，是因为 Bootstrap 默认已为sm断点生成了对应类；gx-xs-2不存在，除非你补上生成逻辑 - 第三方构建工具（如 Vite + Sass）需确保该 mixin 被执行，否则自定义断点下的 gutter 工具类就是空壳
自定义断点时，gutter 类不会自动编译出来
如果你改了
$grid-breakpoints，比如新增xs: 0, sm: 480px，那么gx-xs-2这种类名压根不会出现在 CSS 文件里，除非你主动调用@include generate-gutter-classes()。最常被忽略的是：gutter 是 row-col 协同机制，不是单个元素样式。只要类没加对地方，或者没覆盖默认 fallback，就永远调不准。调试时先打开 DevTools 查
--bs-gutter-x是否存在、值是否符合预期，比猜更省时间。- 想实现“小屏无间隙、中屏 1rem、大屏 1.5rem”，得写：
