直接给 .row 加 margin-bottom 不行，因为 Bootstrap 5+ 中 .row 默认无上下 margin，靠父容器 padding 和列间距维持垂直节奏；硬加会导致嵌套结构间距异常，且常误将内容元素自带 margin 当作 .row 问题。
直接给 .row 加 margin-bottom 为什么不行
因为 .row 本身在 bootstrap 5+ 中默认没有上下 margin，它靠父容器（比如 .container）的 padding 和内部列的 gutter 来维持垂直节奏。你硬加 margin-bottom: 20px，会导致嵌套场景出问题——比如卡片里再套一个 .row，也会被撑开，破坏内边距一致性。
更常见的是：你以为“两行之间没空隙”，其实是 <p>、<h3> 这些内容元素自带的 margin-bottom 在干扰视觉判断，不是 .row 的锅。
- 别用
.row { margin-bottom: 1rem }全局覆盖 - 别对
.row直接设margin-top—— 容易和上层标题/导航的间距叠加，移动端尤其明显 - 检查是否误把内容标签（如
<div class="mb-4">）漏写了，结果怪到栅格头上
推荐做法：用间距工具类控制相邻行之间距离
Bootstrap 的响应式间距类（mt-*、mb-*）是专为这种场景设计的，语义清晰、断点可控、不污染布局逻辑。
比如你想让第二行比第一行多留 24px 垂直空隙，就给第二行加 mt-4（对应 1.5rem ≈ 24px）：
<div class="row">...</div> <div class="row mt-4">...</div>
-
mt-3≈ 1rem（16px），mt-4≈ 1.5rem（24px），mt-5≈ 3rem（48px） - 需要响应式控制？用
mt-md-4（仅中屏及以上生效）、mt-0 mt-sm-3（小屏清空，中屏起加） - 如果两行之间夹着一个标题，更自然的做法是给标题加
mb-4，而不是动.row
进阶：统一管理所有 .row 下方间距（适合项目级规范）
如果你整个项目里希望所有顶层 .row 后都固定留白 24px，又不想每个地方都手动加 mb-4，可以用相邻兄弟选择器安全注入规则：
.row + .row {
margin-top: 1.5rem;
}
这个写法只影响「紧挨着的两个 .row」，不会波及嵌套结构，也不会影响首行或尾行。
- 不要用
.row:not(:first-child)—— 语义不清，且可能匹配到非预期位置 - 别改
--bs-spacer变量来间接影响.row，它不直接控制.row的 margin - 如果用了 CSS-in-JS 或 Tailwind，这类定制规则建议收进全局样式入口，而非组件局部
移动端堆叠时垂直间距失效怎么办
典型场景：桌面四列并排，手机竖排成一列，但竖排后图片/卡片之间贴死了——这不是 .row 的问题，而是列内子元素没设垂直间距。
解决方式很简单：给子项（比如 .card 或 .square-container）加响应式下边距：
<div class="row"> <div class="col-md-3 mb-3 mb-md-0"><div class="card">...</div></div> <div class="col-md-3 mb-3 mb-md-0">...</div> </div>
-
mb-3在所有尺寸生效，mb-md-0在中屏及以上取消，实现“移动端有空隙、桌面无空隙” - 别指望
.row自己在堆叠时“自动加空隙”，它的职责只是分列，不是排内容 - 如果子项是
<img>，记得设vertical-align: top防止基线对齐带来的额外间隙
