Bootstrap间距类按{property}{sides}-{size}三段式命名，如mt-3表示margin-top为$spacer的3倍；支持响应式断点前缀（如ms-md-2），需注意margin塌陷、布局干扰及!important影响。
怎么用 mt-3 这类类名快速加间距
Bootstrap 的间距类不是随便编的，是按 {property}{sides}-{size} 三段式拼出来的，比如 mt-3 就是 margin-top + size=3，对应 $spacer（默认 1rem）的 1 倍值。它不是 magic number，而是 Sass 变量系统生成的确定值。
-
m表示 margin，p表示 padding；t/b/l/r是上下左右，x是左右合写，y是上下合写，空着就是四边全设 - 尺寸从
0到5，0是清零，auto只对m有效（比如mx-auto水平居中） - 别手写
margin-top: 1rem—— 类名更轻、可复用、响应式友好，且自带!important（避免被意外覆盖）
为什么加了 mb-4 却没看到效果
常见原因是父容器或自身 display/float/flex 等布局属性干扰了 margin 的渲染逻辑，尤其是“margin 合并（collapsing）”——两个垂直相邻块级元素的 margin 会自动取最大值，而不是相加。
- 父子间垂直 margin 会塌陷：子元素
mt-5在无 border/padding 的父容器里可能“消失”，加overflow: hidden或padding: 0.01px可破 - Flex/Grid 容器中，
m-类仍生效，但方向语义可能变化（例如在flex-direction: column下mt-仍是向上，但布局流已不同） - 检查是否误用了
pt-3（padding-top）却期待外边距效果；padding 不会塌陷，但会撑高父容器
响应式间距怎么写才不翻车
断点前缀必须紧跟在属性方向之后，格式是 {property}{sides}-{breakpoint}-{size}，比如 ms-md-2（start margin on medium+），不是 md-ms-2，后者根本不会生效。
- 只有
sm、md、lg、xl、xxl支持断点前缀；xs类（如mt-2）默认作用于所有断点，因为它们没有媒体查询限制 - 移动端优先：先写基础间距（如
mb-2），再叠加断点覆盖（如mb-md-0在中屏及以上清空下边距） - 慎用负间距（如
ms-n2）——它能拉近元素，但可能破坏可访问性（如按钮重叠导致点击区变小）或打印样式
容器内留白该动 margin 还是 padding
对 .container 或 .container-fluid，永远别碰它的 margin。它靠 margin-left: auto; margin-right: auto 居中，改了就偏。
- 想让内容离容器边缘有空隙？用
padding：比如class="container p-4"，或更精细的p-lg-5 - 想控制列之间间隙？用
gutter类（Bootstrap 5.1+）：class="row g-3"，比手动给每个.col加pe-3更干净、语义更强 - 如果硬要调外边距，应该包一层 wrapper：
<div class="container"><div class="mx-3">...</div></div>，把偏移逻辑隔离出去
最常被忽略的一点：间距类默认带 !important，这在快速开发时很爽，但一旦和自定义 CSS 或第三方组件冲突，调试起来反而更难——建议在项目初期就评估是否禁用 !important 版本（通过 Sass 配置关闭 $enable-important-utilities），否则后期清理成本很高。
