<p>gy-/gx- 类必须加在 .row 上才生效，加在 .col 或其他元素上无效；其原理是 .row 的负 margin 与 .col 的正 padding 配对抵消实现栅格间距，仅响应 .row > .col 结构且变量仅注入 .row 元素。</p>
gy-* 和 gx-* 必须加在 .row 上才生效
加在 .col、.form-control 或任意其他元素上，gy-2、gx-md-3 这类类名完全无效。浏览器 DevTools 里根本看不到 --bs-gutter-y 或 --bs-gutter-x 变量，列间/行间也不会产生任何间距。
原因很直接：Bootstrap 5 的 gutter 是靠 .row 的负 margin（如 margin-top: -0.5rem）和其直接子元素 .col 的正 padding（如 padding-top: 0.5rem）配对抵消实现的。这个机制只响应 .row > .col 这种结构，且变量注入只发生在 .row 元素上。
- ✅ 正确：
<div class="row gy-2 gx-md-3"><div class="col">...</div></div> - ❌ 错误：
<div class="col gy-2">、<div class="row" style="margin: 0">、<input class="form-control gx-2"> - React-Bootstrap 或 NextUI 等封装组件，需确认
className是否透传到了底层原生<div class="row">，否则类名被吃掉等于没写
响应式 gutter 必须显式覆盖所有断点，默认值不会自动清空
Bootstrap 默认给每个 .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-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（比如新增 xs: 0, sm: 480px），光改变量不够。gx-xs-2、gy-sm-3 这类类名压根不会出现在最终 CSS 文件里，HTML 中写了也无效。
必须同步调用 Bootstrap 提供的 mixin：
@include generate-gutter-classes();- 这个调用要放在你自定义断点之后、
@import "bootstrap/scss/bootstrap"之前 - 漏掉这一步，哪怕断点名写得再对，类名也不会生成
全局改 $grid-gutter-width 也要重编译整个 Bootstrap，适合统一规范的项目；局部微调，老老实实用 gx-/gy- 类就够了。
