最安全的做法是给下一个.row加mt-类而非直接给.row加margin-bottom，因后者会破坏栅格负边距逻辑；推荐用.row + .row { margin-top: 1.5rem; } 或响应式gy-控制列间垂直间距。直接给
.row 加 margin-bottom 是最常见也最危险的做法——它会破坏栅格系统内部的负边距抵消逻辑，导致嵌套网格错位、响应式换行异常，甚至让卡片里的 .row 也意外撑开。
用 mt-* 类加在下一个 .row 上
这是最安全、最符合 bootstrap 设计意图的方式。因为 .row 本身默认无上下 margin，靠父容器 padding 和列 gutter 维持节奏，人为干预上/下边距容易叠加或塌陷。
- 给第二个
.row加mt-4，比给第一个加mb-4更可靠——避免 margin 折叠（collapsing）问题 -
mt-3≈ 1rem（16px），mt-4≈ 1.5rem（24px），mt-5≈ 3rem（48px），值来自$spacer变量 - 需要响应式？写成
mt-0 mt-md-3 mt-lg-4：小屏无空隙，中屏起有，大屏加大 - 如果两行之间夹着一个
<h3></h3>，优先给标题加mb-4，而不是动.row
用 gy-* 控制行内列之间的垂直间距
gy-* 不是“两行之间”的外边距，而是通过修改 --bs-gutter-y 变量，让每个 .col 的上下 padding 和 .row 的负 margin 配对生效——它影响的是同一 .row 内多行 .col 的堆叠间隙（比如表单字段垂直排列）。
- 必须加在
<div class="row"> 上才有效；加在 <code>.col或.form-control上完全无效 - 纯垂直表单（每行一个
.col-12）用gy-2比g-3更合适——只调垂直方向，不干扰全宽控件对齐 - 响应式写法是
gy-0 gy-md-2 gy-lg-3，不是gy-3单一值硬套 - 别混淆：
gy-2≠mb-2；前者是 flex gap 行为，不影响父容器高度计算，打印和缩放更稳定 - 推荐写法：
.row + .row { margin-top: 1.5rem; }——只影响紧挨着的两个顶层.row，不波及嵌套场景（如卡片内部的.row） - 绝对不要写
.row { margin-bottom: 1.5rem; }——所有嵌套.row都会被撑开，破坏一致性 - 如果用 Sass 主题定制，可重设
$spacer: 1.5rem，再复用mb-*类，但依然要避开直接作用于.row - 检查是否误把
<p></p>自带的margin-bottom当成了.row间距问题——先清掉内容元素干扰，再调布局
全局统一控制？用相邻兄弟选择器
如果项目里大量顶层 .row 都需要固定下方留白（比如 24px），又不想每个地方都手动加类，可以用 CSS 规则注入，但必须精准限定作用域。
