gy-/gx- 类必须加在 .row 上才生效，因 bootstrap 5 的 gutter 依赖 .row 的负 margin 与 .col 的正 padding 配对实现，且 css 变量仅注入 .row 元素。
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">、<code><div class="row" style="margin: 0">、<code><input class="form-control gx-2"> - React-Bootstrap 或 NextUI 等封装组件，需确认
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-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: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px);），还必须同步调用：@include generate-gutter-classes();
否则
gx-xxl-3这类类名根本不会被编译进 CSS，HTML 中写了也无效。如果用的是 CDN 引入，无法重新编译，那就得手动补全 CSS 变量，比如：
:root { --bs-gutter-x-md: 1.5rem; }注意：Bootstrap 默认只定义了
--bs-gutter-x和--bs-gutter-y，断点变量（如--bs-gutter-x-md）需自己补全；Sass 用户推荐在$guttersmap 里扩展，比硬写 CSS 变量更可靠。 -
