gx-/gy-类仅对.row元素生效，因bootstrap 5的栅格间距依赖.row的负margin与.col的正padding配对，且css变量仅注入.row；错误用法如加在.col或.form-control上无效。
gx-/gy-类没加在.row上
所有gx-、gy-、g-类只对.row元素起作用，加在.col、.form-control或任意其他容器上完全无效。浏览器 DevTools 里查不到--bs-gutter-x或--bs-gutter-y变量，列间/行间也不会产生任何间距。
根本原因是 Bootstrap 5 的 gutter 机制依赖.row的负 margin（如margin-left: -0.5rem）和其直接子元素.col的正 padding（如padding-left: 0.5rem）配对抵消。这个逻辑只响应.row > .col结构，且 CSS 变量仅注入到.row元素上。
- ✅ 正确：
<div class="row gx-md-3"><div class="col"></div></div> - ❌ 错误：
<div class="col gx-md-3">、<code><input class="form-control g-2">、<div class="row" style="margin: 0"> <li>React-Bootstrap / NextUI 等封装组件需确认<code>className是否透传到了底层原生<div class="row">，否则类名被吃掉等于没写 <h3>响应式断点没写全，小屏仍用默认值</h3> <p>Bootstrap 默认给每个<code>.row都设了gx-2（即--bs-gutter-x: 0.5rem）和gy-2。你只写gx-md-3，小屏下依然保留 0.5rem 间距——不是“中屏才有”，而是“小屏有默认值、中屏起叠加新值”。想实现“小屏无间距、中屏 1rem、大屏 1.5rem”，必须写全：
-
gx-0：清掉所有断点下的水平 gutter（包括 xs） -
gx-md-3：从 md（≥768px）起设为 1rem -
gx-lg-4：从 lg（≥992px）起升级为 1.5rem（gx-4≈ 1.5rem） - 顺序无关，但缺一不可；断点名只能是
xs/sm/md/lg/xl/xxl，g-sx-3或gx-small-3会被忽略
用
mb-/px-硬调替代，破坏了栅格对齐gy-2控制的是相邻.row之间的垂直 gutter，基于 flex gap 机制，不改变父容器高度计算，缩放、打印都稳定；而mb-4是外边距，作用于单个.row本身，会撑开父容器，还可能让下一行脱离栅格对齐基线。- 两个卡片
.row之间需要空隙 → 给上一行加gy-3，比给下一行加mt-4更语义清晰、更可靠 - 表单字段堆叠时想控制行距 → 用
gy-2而不是mb-2，否则.container-fluid下容易右侧溢出或出现横向滚动条 - 手动给
.col加px-0或ms-3→ 只改了 padding/margin，但.row的负 margin 还在，结果是整行左偏、右侧留白、小屏换行错乱
自定义断点后类名压根没生成
如果你在 SCSS 中修改了
$grid-breakpoints（比如新增sm: 480px），那么gx-sm-2这类类名压根不会被编译出来。光改变量不够，必须同步调用：-
@include generate-gutter-classes()，否则 CSS 文件里没有对应规则 -
$grid-breakpoints和$gutters必须在@import "bootstrap/scss/bootstrap"之前声明，且顺序不能错 - CDN 或直接引入
bootstrap.min.css的项目，改 Sass 变量完全无效——这些项目里$grid-gutter-width不暴露、不可覆盖
最常被忽略的一点：局部调整永远优先用
gx-/gy-工具类；只有当设计规范要求全站 gutter 统一且长期稳定时，才碰变量——而一旦碰，就得接受整套 Sass 构建流程的约束。 -
