bootstrap怎么设置两个容器之间的垂直间距大小

直接给 .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 classmb-4漏写了结果怪到栅格头上推荐做法用间距工具类控制相邻行之间距离Bootstrap 的响应式间距类mt-*、mb-*是专为这种场景设计的语义清晰、断点可控、不污染布局逻辑。比如你想让第二行比第一行多留 24px 垂直空隙就给第二行加 mt-4对应 1.5rem ≈ 24pxdiv classrow.../divdiv classrow mt-4.../divmt-3 ≈ 1rem16pxmt-4 ≈ 1.5rem24pxmt-5 ≈ 3rem48px需要响应式控制用 mt-md-4仅中屏及以上生效、mt-0 mt-sm-3小屏清空中屏起加如果两行之间夹着一个标题更自然的做法是给标题加 mb-4而不是动 .row进阶统一管理所有 .row 下方间距适合项目级规范如果你整个项目里希望所有顶层 .row 后都固定留白 24px又不想每个地方都手动加 mb-4可以用相邻兄弟选择器安全注入规则 唱鸭 音乐创作全流程的AI自动作曲工具集 AI 辅助作词、AI 自动作曲、编曲、混音于一体