gy- 类必须加在 .row 上才生效，用于控制同一 .row 内多行 .col（如多个 .col-12）间的垂直间隙，通过 css 自定义属性 --bs-gutter-y 触发 flex gap 行为，不影响盒模型尺寸；与 mb- 的外边距有本质区别。
gy-* 类必须加在 .row 上才生效
列之间的垂直间距不是靠给 .col 加 mb-* 或 gy-* 实现的，而是由 .row 的 gy-* 类控制。这个类会设置 CSS 自定义属性 --bs-gutter-y，触发 flex 布局的 gap 行为——它影响的是同一 .row 内多行 .col（比如多个 .col-12 堆叠）之间的上下空隙，不是外边距。
常见错误现象：
<div class="col gy-3"> → 完全无效，DevTools 里查不到 <code>--bs-gutter-y-
<div class="row gy-2"> <div class="col-12">A</div> <div class="col-12">B</div> </div>→ A 和 B 之间出现 0.5rem 垂直间隙 - 想让两个
.col-12在同一.row内上下错开？→ 用gy-2 - 想让第二个
.row距离第一个.row有空隙？→ 用mt-4（给第二个.row加上边距） - 表单字段垂直堆叠时需要统一留白？→ 用
gy-2比g-3更精准，只动垂直方向 -
gy-0：清除所有断点（包括 xs）的垂直 gutter -
gy-md-2：从 md（≥768px）起设为 0.5rem -
gy-lg-3：从 lg（≥992px）起覆盖为 0.75rem - 给子项（如
.card或.square-container）加响应式下边距：mb-3 mb-md-0（小屏有间距，中屏及以上清空） - 如果子项是 Flex 容器，也可在
.col上加d-flex flex-column，再用justify-content-between控制内部分布 - 检查是否误用了
g-*（同时设 x/y）却期望只控垂直方向，结果水平方向也被重置
注意：gy-* 不作用于单行内并排列（如 .col-6 + .col-6），那种是水平间距，该用 gx-*。
gy-* 和 mb-* 的本质区别在哪
gy-2 是布局级间距：它通过 gap 实现，不改变盒模型尺寸，不影响父容器高度计算，打印和缩放时稳定；mb-3 是外边距，会撑开父容器、可能引发横向滚动条、在嵌套结构中容易叠加失控。
使用场景判断：
别用 mb-3 替代 gy-2：前者会让 .col 实际占用更多空间，而后者只是布局间隙，语义和行为完全不同。
响应式垂直间距怎么写才不漏断点
Bootstrap 默认在所有断点都启用 gy-2（即 --bs-gutter-y: 0.5rem）。如果你只想在中屏及以上有垂直间距，不能只写 gy-md-2，必须显式清掉小屏的默认值：
断点名必须严格用 xs/sm/md/lg/xl/xxl，写成 gy-sx-2 或 gy-small-2 会被忽略。顺序无关，但缺一不可——漏掉 gy-0，xs 下仍会有默认 0.5rem 间距。
移动端堆叠后垂直间距“消失”了怎么办
桌面四列并排、手机竖排成一列，但竖排后卡片/图片贴死了——这不是 gy-* 失效，而是 .row 里只有一行 .col-12，gy-* 没有“多行”可作用。真正需要加间距的是列内的子元素。
解决方式：
真正容易被忽略的是：垂直间距的“生效对象”取决于布局结构——gy-* 管的是 .row 内部的行间关系，不是列内容之间的距离；后者得靠子元素自己的间距类或 flex 控制。
