bootstrap 5 间距工具类（如 mt-3、pb-4）通过断点前缀（sm-/md-/lg-等）实现响应式留白，应避免误用 row/col 承担留白功能、硬扩未定义数值（如 mt-6）、滥用 !important 或忽略 viewport 设置。
用 Bootstrap 的间距工具类（margin/padding）直接控制留白
Bootstrap 5 内置的 mt-3、pb-4 这类间距工具类，就是专为响应式留白设计的——不是靠写 CSS，而是靠组合 class。它们默认按断点分层，比如 mb-md-5 表示「中屏及以上才生效」，ps-lg-0 表示「大屏起取消左内边距」。
常见错误是只写 mb-3，结果在手机和桌面留白一样多，破坏了视觉节奏；或者误以为加个 !important 就能覆盖，其实会破坏断点逻辑。
-
mt-/mb-/ms-/me-控制外边距（top/bottom/start/end），pt-/pb-/ps-/pe-控制内边距 - 数值范围是
0到5（对应 $spacer * 0–5），还有auto（如mx-auto） - 断点前缀顺序：无前缀（所有设备）、
sm-（≥576px）、md-（≥768px）、lg-（≥992px）、xl-（≥1200px）、xxl-（≥1400px） - 想让某段留白「仅在桌面显示，手机隐藏」？写成
mb-md-4 mb-0，后者覆盖前者在小屏下的值
避免用 row 和 col 做留白，那是布局容器
新手常把 row 当“空行”，给它加 mt-5，再塞个空 col 撑高度——这既语义错误，又容易触发 Bootstrap 的负外边距（row 自带 margin-left/right: -15px），导致实际留白错位或水平滚动条出现。
真正需要垂直留白时，就用 mt-* 或 mb-* 直接作用在内容块上；需要水平留白，优先用 ps-*/pe-* 或容器级 container/container-fluid 的内置 padding。
-
row的唯一职责是包裹col并管理栅格对齐，不该承担留白功能 - 如果必须撑高容器（比如 banner 区域），用
min-height或h-100+ 父容器d-flex flex-column，而不是塞空col - 自定义留白需求强的组件（如卡片间距），建议单独写 class，别硬套
row结构
自定义间距比例时，改 $spacers 而非单个 class
Bootstrap 默认的 3（0.75rem）、4（1rem）这些值，对中文排版或大屏展示常偏小。有人手动写 mt-6 发现无效——因为默认配置里没定义 6，直接加 class 不会生效。
想支持 mt-6 或改成 8px 基准，必须在 Sass 编译前修改变量 $spacers，而不是靠覆盖 CSS 或 JS 动态加 class。
- 修改位置：你的
_custom.scss中重定义$spacers: (0: 0, 1: .25rem, 2: .5rem, 3: .75rem, 4: 1rem, 5: 1.5rem, 6: 2rem); - 不推荐用
!important覆盖工具类，会导致断点失效（比如mb-md-4 !important会干掉mb-0在小屏的覆盖） - 若项目不用 Sass，就老实用内联
style="margin-bottom: 2rem"，别强行扩展工具类
移动端留白塌陷？检查 viewport 和父容器约束
写了 mb-4 却在手机上看不出效果，大概率不是 class 没生效，而是父容器高度被压缩、文字换行挤压、或 viewport 设置异常。Bootstrap 的间距工具类本身无兼容性问题，但依赖标准渲染流。
典型表现：iOS Safari 下底部留白“消失”，实际是父 div 没设 min-height 或被 Flex 容器收缩；安卓微信里 mt-5 看起来像 mt-2，往往是 viewport 缩放被干扰。
- 确保 HTML 有正确
<meta name="viewport" content="width=device-width, initial-scale=1"> - Flex 容器子元素若需稳定留白，加
flex-shrink: 0防止被压缩（可用flex-shrink-0工具类） - 文字块内留白被换行吃掉？试试
white-space: nowrap或把间距加到外层容器
留白不是越加越多就越“响应式”，关键在断点间留白的节奏是否匹配内容密度——手机端慎用 mb-5，桌面端也别堆砌 mt-3 mt-md-4 mt-lg-5。真要精细控制，宁可少用工具类，多花两分钟看一眼 computed styles。
