gy-*类必须加在.row上才生效，加在.col或其他元素上无效；它通过设置--bs-gutter-y变量调控.col上下padding与.row负margin配对实现垂直间距，响应式需用gy-0 gy-md-2 gy-lg-3完整链声明。
gy-* 必须加在 .row 上才生效，加在 .col 或其他元素上无效
bootstrap 5 的 gy- 类只作用于 .row 元素，它通过设置 css 自定义属性 --bs-gutter-y，让该行内所有 .col 的上下 padding 和 .row 自身的负 margin 配对抵消——这个机制只在 .row 上声明才向下透传。你在 .col、.form-control 或普通 <div> 上写 <code>gy-3，devtools 里根本看不到 --bs-gutter-y 变量，也不会产生任何垂直间距。
常见错误现象包括：
- 给
<div class="col gy-2"> 加类 → 列没变化，但右侧可能意外偏移（因未抵消 <code>.row的负 margin） - 在表单字段上直接加
mb-3模拟行距 → 父容器高度不可控，打印时错位，缩放后间隙异常 -
gy-0：先清掉所有断点下的默认垂直 gutter（默认是gy-2≈ 0.5rem） -
gy-md-2：从 md 起启用 0.5rem -
gy-lg-3：从 lg 起升级为 1rem（gy-3≈ 1rem） - 给第一个
.row加mb-4→ 破坏.row的负 margin 抵消逻辑，导致嵌套网格错位、卡片布局塌陷 - 两个
.row之间夹着一个<h3></h3>→ 应该给<h3></h3>加mb-4，而不是动.row - 需要两行卡片之间留空 → 用
gy-3在上一行加，比给下一行加mt-4更符合栅格语义
响应式 gy-* 写法不是“仅在某断点生效”，而是“从该断点起覆盖”
比如 gy-md-2 表示“≥768px（md 断点）起生效，且对 lg、xl 断点也持续有效，除非被更高优先级的类覆盖”。它不是媒体查询开关，也不自动回退到默认值。
想实现“小屏无垂直间距、中屏起有 0.5rem、大屏加大到 1rem”，必须显式写出完整链：
顺序无关，但缺一不可；漏掉 gy-0，xs/sm 下仍会沿用默认 gy-2。
别混淆 gy-* 和 mt-*：它们解决的是不同层级的问题
gy-* 控制的是**相邻 .row 之间的垂直 gutter**（即网格行与行之间），靠 flex gap 机制实现，不改变父容器高度计算，缩放/打印稳定；而 mt-* 是外边距，作用于单个 .row 元素本身。
典型误用场景：
自定义断点后，gy-* 类不会自动生效
如果你在 SCSS 中新增了断点（例如 $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px);），还必须同步调用：
@include generate-gutter-classes();
否则 gy-xxl-3 这类类名根本不会被编译进 CSS，HTML 中写了也无效。官方 mixin 默认只生成内置断点的 gutter 类，自定义断点需手动触发生成逻辑。
容易被忽略的一点是：即使你只改了断点数值（比如把 lg 从 992px 改成 1024px），只要没重新运行 generate-gutter-classes()，原有 gy-lg-* 类仍按旧值编译，新断点类则完全缺失。
