gx-/gy- 类必须加在 .row 上才生效，因其依赖 .row 的负 margin 与 .col 的正 padding 配对机制，且 css 变量仅注入到 .row；错误用法如加在 .col 或 form-control 上无效。
gx-/gy- 类必须加在 .row 上才生效
所有 gx- 和 gy- 工具类，包括带断点的如 gx-md-3、gy-lg-2，只对 .row 元素起作用。加在 .col、.form-control 或任意其他容器上，CSS 变量 --bs-gutter-x 和 --bs-gutter-y 根本不会被注入，DevTools 里查不到，间距也不会出现。
这是因为 Bootstrap 5 的 gutter 机制依赖于 .row 的负 margin（如 margin-left: -0.5rem）和其直接子元素 .col 的正 padding（如 padding-left: 0.5rem）配对抵消。这个配对只在 .row > .col 结构下触发，且变量仅注入到 .row 元素上。
- ✅ 正确：
<div class="row gx-md-3 gy-2"><div class="col"></div></div> - ❌ 错误：
<div class="col gx-md-3">、<code><input class="form-control gy-1">、<div class="row" style="margin: 0"><li>React-Bootstrap / NextUI 等封装组件需确认 <code>className是否透传到了底层原生<div class="row">，否则类名被吃掉等于没写<h3>响应式 gutter 必须显式覆盖所有断点，默认值不会自动清空</h3> <p>Bootstrap 默认给每个 <code>.row注入了gx-2（即--bs-gutter-x: 0.5rem）和gy-2（即--bs-gutter-y: 0.5rem）。你只写gx-md-3，小屏（xs/sm）下依然保留 0.5rem —— 不是“中屏才有”，而是“小屏有默认值、中屏起叠加新值”。想实现「小屏无间距、中屏 1rem、大屏 1.5rem」，必须写全：
-
gx-0：清掉所有断点下的水平 gutter（包括 xs） -
gx-md-3：从 md（≥768px）起设为 1rem（gx-3 ≈ 1rem） -
gx-lg-4：从 lg（≥992px）起升级为 1.5rem（gx-4 ≈ 1.5rem）
顺序无关，但缺一不可；断点名只能是
xs/sm/md/lg/xl/xxl，g-sx-3或gx-small-3会被忽略。别用 mt-/mb-/px- 模拟 gutter，它会破坏布局基线
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 还在，结果是整行左偏、右侧留白、小屏换行错乱
自定义断点后，gx-/gy- 类不会自动编译出来
如果你在 SCSS 中修改了
$grid-breakpoints（比如新增了sm: 480px），那么gx-sm-3这类类名根本不会出现在最终 CSS 文件里，除非你主动调用：@include generate-gutter-classes();
同理，若用 Sass 自定义 gutter 尺寸，必须扩展
$guttersmap 并重新编译：$gutters: ( 0: 0, 2: 0.5rem, "sm": 1rem, "md": 1.5rem );
注意键名用字符串
"sm"，不是未加引号的sm（Sass 中会被当变量解析）；改完必须重新编译 CSS，纯 CDN 引入无法生效。最常被忽略的一点：断点级 gutter 变量（如
--bs-gutter-x-md）默认不会生成，即使你写了gx-md-3，也得靠generate-gutter-classes()或手动补全变量声明，否则它读的还是根级--bs-gutter-x。 -
