直接修改 .row 的 margin 会破坏居中布局，因其依赖父容器 padding 和列 gutter 控制垂直节奏；应优先使用 Bootstrap 响应式间距工具类（如 mt-4）或相邻兄弟选择器（.row + .row）安全添加空隙。
直接改 .row 的 margin 会破坏居中？别这么干
bootstrap 的 .row 本身没有上下 margin，它靠父容器（比如 .container）的 padding 和子列（.col-*）的 gutter 来控制垂直节奏。如果你给 .row 加 margin-top 或 margin-bottom，看似“调了间距”，实则容易和栅格系统其他元素（如标题、卡片、列表组）的默认边距叠加，导致布局错位或响应式失效。
更关键的是：很多开发者在移动端看到“行挨得太近”，其实是误判——真正的问题常出在内容元素自身（比如 <p> 默认有 margin-bottom），而非 .row 缺少间距。
- 检查是否误把
<h2>后的空白当成了“行间距”——它其实是h2自带的margin-bottom - 避免对
.row直接写style="margin-bottom: 20px"，这会干扰 Bootstrap 的响应式断点行为 - 如果真要加空隙，优先用工具类作用于
.row的兄弟元素，而不是.row自身
用 Bootstrap 内置间距类（mb-* / mt-*）最安全
Bootstrap 5+ 提供了一整套响应式外边距工具类，比如 mb-3（bottom margin 1rem）、mb-md-4（仅在 ≥768px 时 bottom margin 1.5rem）。它们语义清晰、断点可控，且不会污染全局样式。
适用场景：两段独立内容之间需要视觉分隔，例如一个图文 .row 下面紧跟一个纯文本 .row。
- 在下方那个
.row上加mt-4，比在上方.row加mb-4更可靠（避免嵌套时 margin 折叠） - 小屏紧凑、大屏宽松？用
mt-2 mt-md-4 mt-lg-5这类组合 - 别用
mb-0强制清空——除非你确认父容器或上层元素已提供足够留白
想统一控制所有 .row 之间的距离？改 CSS 变量更省心
如果你的项目里大量使用 .row，且希望全局统一行间空隙（比如所有 .row 下方固定留 24px），可以覆盖 Bootstrap 的 CSS 自定义属性，而不是逐个加类。
原理是：Bootstrap 5 的间距工具类底层依赖 --bs-spacer 系列变量，但 .row 本身不直接受控；所以更稳妥的做法是通过伪类或相邻兄弟选择器来注入规则。
- 推荐写法：
.row + .row { margin-top: 1.5rem; }——只影响紧挨着的两个.row，不波及其他布局 - 如果用了 Sass，可在自定义主题中重设：
$spacer: 1.5rem，再配合mb-*类复用 - 注意不要用
.row { margin-bottom: ... }，否则会导致嵌套.row（如卡片内网格）也受影响
为什么有时加了间距却“没反应”？检查这三个地方
常见现象：明明写了 mt-5，预览时还是贴在一起。这不是框架 bug，而是被其他样式盖掉了，或者根本没生效。
- 浏览器开发者工具里看计算后的
margin-top值是否为 0 —— 很可能是父元素设置了overflow: hidden或display: flex导致 margin 折叠 - 检查是否在
.row外层又套了.container或.container-fluid，而这两个容器本身就有padding-top/bottom，和你的 margin 叠加后反而过量 - 确认 class 拼写正确：
mt-4不是mb-4，mt-md-3不是mt-md3（少了个短横）
最常被忽略的一点：Bootstrap 的间距类只对 display 为 block、flex、grid 的元素生效；如果某个 .row 被 JS 动态加了 style="display: contents"，那所有 margin 类都会失效。
