Bootstrap间距类按{property}{sides}-{size}三段式命名，如mt-3表示margin-top为$spacer的1倍；支持响应式断点前缀（如ms-md-2），需注意margin塌陷、flex流影响及!important优先级。
别去记“大全”，直接按规则拼——Bootstrap 的 spacing 类根本不用背，全靠三段式命名推导出来。
怎么一眼看懂 mt-3、ps-2 这类名字
它们不是随机字符串，而是 {property}{sides}-{size} 严格拼出来的：
-
m是 margin，p是 padding；t是 top，b是 bottom，s是 start（左，RTL 下是右），e是 end（右，RTL 下是左） -
x= left + right，y= top + bottom，空着不写 = 四边同时生效 -
size是 0–5 或auto：比如mt-3就是margin-top: 1rem（默认$spacer值的 1 倍） - 别混淆
ms-2（start 边距）和ml-2（legacy left）——Bootstrap 5+ 推荐用ms/me，更语义、支持 RTL
为什么加了 mb-4 却没反应
不是类名写错了，大概率是布局机制在“吃掉”你的 margin：
- 父子垂直 margin 塌陷：子元素
mt-5在无 border/padding 的父容器里会“顶穿”上去——给父容器加overflow: hidden或padding: 0.01px破解 - Flex/Grid 容器中，
mt依然生效，但“向上”可能不等于“远离上一个兄弟”，要看flex-direction和对齐方式 - 误把
pt-3当mt-3用：padding 不塌陷，但会撑高父容器高度，视觉上“留空位置”效果不同 - 检查是否被
!important覆盖了——spacing 类自带!important，但若你手写 CSS 也加了!important且权重更高，就会赢
响应式间距怎么写才不白费劲
断点前缀必须紧贴 sides 后，顺序错一个字符就失效：
- 正确：
ms-md-2（中屏起生效 start margin）、mb-0 mb-lg-3（默认清空下边距，大屏起恢复） - 错误：
md-ms-2、mb-lg-3 mb-0（后者会覆盖前者，因为 CSS 顺序优先） - 只有
xs/sm/md/lg/xl/xxl支持断点；mt-2这种没前缀的，作用于所有尺寸 - 负间距如
ms-n2能拉近元素，但小心按钮重叠、焦点框错位、打印时内容被截断
容器内留白，该动 margin 还是 padding
.container 的 margin-left: auto; margin-right: auto 是它居中的命脉，别碰：
- 想让内容离容器边缘有空隙？用
padding：class="container p-4"或p-lg-5 - 想控制栅格列之间间隙？优先用
g-3（gap 工具类），比给每个.col加pe-3更干净、不干扰列宽计算 - 真要偏移整个内容区？包一层 wrapper：
<div class="container"><div class="mx-3">...</div></div>，把偏移逻辑隔离出去
Spacing 类看着简单，但 margin 塌陷、flex 流向、断点顺序、RTL 适配这些细节，任何一个漏掉都会让页面“看起来不对”。与其死记类名，不如记住那条公式：m/p + t/b/s/e/x/y + - + size/ breakpoint——拼错一次，查一次浏览器开发者工具的 computed 样式，比翻文档快得多。
