gy-*类必须加在.row上才生效，它通过修改--bs-gutter-y变量控制.col上下内边距与.row负外边距配合实现垂直间距，不等于margin-bottom；响应式应写为gy-0 gy-md-2 gy-lg-3。
gy-* 类必须加在 .row 上才生效
直接写 <div class="col-6 gy-3"> 完全没用，DevTools 里连对应 CSS 变量都看不到。Bootstrap 5 的 <code>gy-* 是通过修改 .row 的 --bs-gutter-y 自定义属性来控制行与行之间的垂直间距的，它只对直接子元素为 .col 的 .row 生效。
常见错误包括：
- 把
gy-3加在.col或普通<div> 上<li>用在嵌套的 <code>.row（比如卡片内部的网格）却忘了父容器是否支持 flex 布局 - React-Bootstrap 等封装组件未透传
className到原生<div class="row">，导致类名被丢弃<h3>gy-3 不等于给 .row 加 margin-bottom</h3> <p><code>gy-3控制的是该.row内部所有.col的上下内边距（padding-top/padding-bottom），同时配合.row自身的负外边距逻辑，确保多行堆叠时列内容垂直对齐、不重叠也不脱节。它不是简单地给.row加margin-bottom: 1rem——那样会破坏栅格基线，尤其在响应式换行时容易导致错位或溢出。如果你只是想让两个
.row之间留空，更安全的做法是：- 在上一个
.row上加mb-4（推荐） - 用相邻兄弟选择器
.row + .row { margin-top: 1.5rem; }（需确保不污染嵌套场景） - 避免直接改
.row { margin-bottom: ... }，否则会影响所有嵌套网格
响应式垂直间距怎么写：gy-md-0 gy-lg-3
想实现“小屏无行间空隙、中屏开始有、大屏加大”，就别用
gy-3单一值硬套。正确写法是叠加响应式类：gy-0 gy-md-2 gy-lg-3。Bootstrap 会按断点优先级覆盖：从lg（≥992px）起用3rem垂直 gutter，md（≥768px）起降为2rem，其余断点保持清零。注意：
-
gy-sm-2表示从sm断点（≥576px）起生效，不是“仅在 sm” - 不要混用
g-3（已废弃）或旧版no-gutters，它们在 Bootstrap 5 中无效 - 自定义断点（如新增
xs）后，必须同步调用@include generate-gutter-classes()，否则gy-xs-2根本不会被编译出来
全局改默认垂直 gutter？别手写 CSS 覆盖
如果全站几十个
.row都要统一设成gy-2，一个个加太累，但也不该写.row { --bs-gutter-y: 0.5rem; }这种规则——它绕过了 Bootstrap 的工具类机制，无法响应断点变化，且可能被后续加载的 CSS 覆盖。真正可控的方式只有两种：
- 用 Sass：改变量
$grid-gutter-width-y: 0.5rem;，再重新编译整个 Bootstrap（适合设计规范统一的项目） - 不用 Sass？那就老实用
gy-2，它是框架原生支持、可预测、可调试的唯一路径 - 千万别在
:root里重设--bs-gutter-y后指望gy-*类自动适配——这个变量只参与部分工具类计算，并不驱动全部 gutter 行为
最常被忽略的一点：垂直 gutter 的实际视觉效果，往往被内容自身边距干扰（比如
<p></p>默认带margin-bottom）。调gy-3前，先检查是不是文本、卡片或表单控件自己撑开了空间。 - 在上一个
