p-2作用于四边内边距，pt-2仅作用于上边内边距；bootstrap简写规则为“方向+尺寸”，其中p代表padding，t代表top，y代表vertical（上下），x代表horizontal（左右）。
class 名里 p-2 和 pt-2 到底差在哪
区别在于作用方向：p-2 是四边同时加内边距，pt-2 只动上边（top）。Bootstrap 的简写规则本质是「方向 + 尺寸」组合，不是随便拼的。
常见错误是以为 py-2 是“左右 padding”，结果发现没生效——其实 y 指 vertical（上下），x 才是 horizontal（左右）。
-
p/m：全方向（padding / margin） -
pt/mt：只上（top） -
pb/mb：只下（bottom） -
ps/ms：只左（start，支持 RTL） -
pe/me：只右（end，支持 RTL） -
px/mx：左右（x 轴） -
py/my：上下（y 轴）
尺寸数字 0–5 对应的实际像素值怎么查
不是固定像素，而是基于 $spacer 变量计算出来的比例值。默认配置下 1 是 0.25rem（即 4px），2 是 0.5rem（8px），以此类推，5 是 3rem（48px）。但这个映射关系可能被自定义覆盖。
如果你在项目里改过 SCSS 变量 $spacers，或者用了 bootstrap/scss/_variables.scss 的重载机制，px-3 就未必等于 16px。
- 查当前值最准的方式：打开浏览器开发者工具，选中元素，看 computed 样式里的
padding-left或margin-top - 想确认源码定义：搜
$spacers在 Bootstrap 的 SCSS 文件里如何赋值 - 别硬记 2=8px，不同版本、不同主题下会变
为什么加了 mb-3 没反应，或者看起来“多了一截”
大概率是 margin 折叠（margin collapse）在作怪，尤其在块级元素垂直方向。比如两个相邻的 div，一个设 mb-3，一个设 mt-3，实际间距不会变成两倍，而是取较大值。
另一个常见原因是父容器没触发 BFC（块级格式化上下文），导致子元素 margin “撑开”了父容器。这时加 overflow: hidden 或 display: flow-root 能解决，但用 Bootstrap 的话更推荐换用 pt-3/pb-3 避开折叠。
- 垂直 margin 折叠只发生在普通流中的块级元素之间
- flex / grid 容器内部不发生 margin 折叠
-
pt/pb是 padding，完全不参与折叠，更可控 - 如果必须用 margin，考虑用
mt-auto或mb-auto做自动分隔
响应式写法 pt-md-4 的断点逻辑容易漏掉什么
它只在 md 及以上生效，sm 或更小屏幕会退回到无样式状态（也就是 0 值），而不是继承上一级。很多人误以为它是“最小断点”，结果在手机上看空白一片。
真正要实现“小屏无间距、中屏开始有”，得补一层基础值，比如先写 pt-0 pt-md-4。否则 pt-md-4 单独存在时，在 xs 下相当于没设 padding-top，由浏览器默认或父级样式决定，不可控。
- 所有响应式 class 都是“从该断点起生效”，不向下兼容
- 需要显式声明更小断点的值，才能保证行为确定
- 断点缩写顺序不能错：
xssm md lg xl xxl，没有mm或mn - 检查是否启用了对应断点：有些定制版 Bootstrap 会删掉
xxl断点
