应使用 gy- 类而非 mt-/mb- 控制 .row 垂直间距，因 gy-* 通过 flex gap 精准作用于子元素且不影响盒模型；需注意子元素自身 margin 和嵌套 .row 的单独处理。
直接给 .row 加 mt-4/mb-4 是错的
Bootstrap 5 的 .row 默认没有上下 margin，它的垂直节奏由父容器（如 .container）的 padding 和子内容（如 <p></p>、<h2></h2>）自身的 margin 决定。手动加 mb-4 或 mt-3 容易和标题、卡片等组件的默认边距叠加，尤其在响应式断点切换时出现高度跳变。
常见错误现象：
- 给
<div class="row mb-4"> 加类后，下一行“突然下沉”，但 DevTools 显示 <code>.row高度没变，其实是上一个<h2></h2>的margin-bottom和你加的mb-4叠加了 - 移动端看着正常，桌面端两行之间空隙翻倍
- 打印 PDF 或缩放页面时，行间距离崩坏
真正控制行与行之间空隙，用 gy-* 类
gy-* 是 Bootstrap 5 原生支持的 flex gap 控制类，它作用于 .row，只影响其直接子元素（即 .col）之间的垂直间距，且不改变盒模型尺寸——这意味着不会撑开父容器、不会触发横向滚动、缩放和打印表现稳定。
正确写法示例：
<div class="row gy-2"> <div class="col-12"> <label>用户名</label><input class="form-control"> </div> <div class="col-12"> <label>邮箱</label><input class="form-control"> </div> </div>
关键点：
-
gy-2对应--bs-gutter-y: 0.5rem，值小而紧凑，适合表单字段堆叠 - 别用
g-3替代——它同时改水平 + 垂直 gutter，在纯垂直场景下水平部分无意义，还可能干扰全宽控件对齐 - 响应式需求（比如小屏紧贴、大屏拉开）：写
gy-0 gy-md-2 gy-lg-3，顺序无关，Bootstrap 按断点优先级生效
想全局删掉所有行间空隙？别扫荡式加 gy-0
如果项目里大量 .row 都需要统一的垂直间距，直接每个都加 gy-0 不仅冗余，还容易漏掉嵌套结构。更稳妥的做法是用 CSS 相邻兄弟选择器精准注入：
.row + .row {
margin-top: 0;
}
这个规则只影响两个紧邻的 .row，不污染其他元素，也不依赖工具类加载顺序。若需带响应式，可配合媒体查询：
@media (min-width: 768px) {
.row + .row {
margin-top: 1rem;
}
}
注意：
- 别在
:root里覆盖--bs-gutter-y，它会被工具类生成的同名变量压制，反而让所有gy-*失效 - 嵌套
.row（比如.col里再放.row）不受该规则影响，需单独处理 - 如果父容器用了
.container-fluid且内容右侧溢出，大概率是误用了mb-*而非gy-*
最常被忽略的一点：检查内容元素自身
即使 .row gy-0 生效，视觉上两行之间仍有空隙，问题往往不在栅格系统——而是子元素自带 margin。比如：
-
<p></p>默认有margin-bottom: 1rem，放在.col里就会撑开垂直空间 -
<h2></h2>的margin-bottom常被当成“行间距”误调 - 自定义组件（如
.card、.alert）内部有固定 padding，也会贡献额外高度
建议先删掉这些元素的 margin 再判断是否真要动 .row 的布局逻辑。调试时打开浏览器 DevTools 的 Computed 面板，盯着 margin-bottom 和 gap 两个属性看，比猜更快。
