gy-5必须加在.row上才生效，加在.col或.form-control等元素上无效；其通过--bs-gutter-y变量调控.row负margin与.col上下padding配对实现垂直间距，响应式需显式写全链如gy-0 gy-md-5 gy-lg-6。
gy-5 必须加在 .row 上才生效
直接写 gy-5 但加在 .col、.form-control 或普通 <div> 上，完全无效。浏览器 DevTools 里根本看不到 <code>--bs-gutter-y 变量，也不会产生任何垂直间距。原因很明确：Bootstrap 5 的 gy- 类依赖 .row 元素上声明的 CSS 自定义属性向下透传，只对 .row > .col 结构起作用。
常见错误包括：
<div class="col gy-5"> → 列本身多了上下 padding，但 <code>.row的负 margin 没抵消，导致整行上下错位-
<input class="form-control gy-3">→ 无样式变化，gy-类根本不匹配该元素类型 - 用
mb-4替代gy-5→ 外边距撑开父容器，缩放或打印时易塌陷、错行 -
gy-0：先清掉所有断点下的默认垂直 gutter（包括 xs） -
gy-md-5：从 md 起设为 3rem（gy-5≈ 3rem） -
gy-lg-6：从 lg 起升级为 4rem（gy-6≈ 4rem，需确认项目是否启用了该尺寸） - 在 SCSS 主文件中调用：
@include generate-gutter-classes(); - 确保
$guttersmap 已定义对应尺寸，例如："sm": 2rem（注意引号，Sass 中未引号会被当作变量） - 否则 HTML 中写
gy-sm-5，CSS 里压根没这条规则，DevTools 查不到任何效果 - 两个卡片
.row之间要空隙 → 给上一行加gy-5，比给下一行加mt-5更语义清晰、更可靠 - 表单字段堆叠时想控制行距 → 用
gy-2，不是mb-2；后者在.container-fluid下容易右侧溢出或出现横向滚动条 - 手动给
.row加margin: 0→ 破坏负 margin 抵消逻辑，嵌套网格会塌陷、列换行错乱
响应式 gy-* 要写全链，不能只写 gy-md-5
gy-md-5 不是“仅在 md 断点生效”，而是“≥768px（md）起生效，且持续影响 lg/xl/xxl，除非被更高断点类覆盖”。它不会自动清掉 xs/sm 下的默认值（默认是 gy-2 ≈ 0.5rem）。想实现“小屏无行距、中屏起 3rem、大屏升到 4rem”，必须显式写出完整链：
漏掉 gy-0，xs/sm 下仍会沿用默认 gy-2；顺序无关，但缺一不可。
自定义断点后 gy-* 类不会自动编译出来
如果你在 Sass 中新增了断点（比如 $grid-breakpoints: (xs: 0, sm: 480px, md: 768px, ...)），光改变量还不够。Bootstrap 默认只生成 xs/sm/md/lg/xl/xxl 对应的类，新增断点如 sm（480px）或 xl（1400px）需要手动触发类生成：
别用 mt-/mb- 模拟 gy- 行间距
gy-5 控制的是相邻 .row 之间的垂直 gutter，基于 flex gap 机制，不改变父容器高度计算，缩放、打印、高 DPI 屏幕下都稳定；而 mt-5 是作用于单个 .row 元素的外边距，会撑开其父容器，破坏栅格基线对齐。
真正容易被忽略的是：gutter 机制依赖 .row 和直接子 .col 的结构完整性——嵌套 .row（比如 .col 里再放网格）时，外层 gy-5 不会继承给内层，必须单独加内层 gy-0 或 gy-1。
