直接用m-/p-类替换手写值可修复90%间距错乱，但需避免方向后缀与数值写反、漏断点链、rtl下误用pl-/pr-；mt-4失效主因是margin塌陷或父容器未触发bfc，应改用pt-类或加overflow:hidden。
直接用 m- 和 p- 类替换手写 margin/padding 值，90% 的间距错乱能立刻修复——前提是别把方向后缀和数值写反、别漏掉响应式断点链、别在 RTL 场景下硬写 pl-/pr-。
mt-4 为什么没生效？先查 margin 塌陷和父容器 BFC
垂直 margin 在块级元素间会自动合并（collapse），子元素的 mt-4 看似“消失”，其实是被父容器吞掉了。
- 常见现象：卡片内部标题加了
mt-3，但顶部空白没出现；表单字段之间mb-2叠加后只显示一个单位间距 - 优先尝试给父容器加
overflow: hidden或pt-0（用pt-替代子元素mt-） - Flex/Grid 容器里
mt-仍有效，但语义变成“沿主轴起始方向偏移”，需配合justify-content判断实际效果 - 别在
.row上直接加mt-类——它本身有负 margin，叠加后容易破坏栅格对齐
g-3 不起作用？Bootstrap 5 的 gutter 已拆成 gx-/gy-
.g-3 没删，但它现在只在同时需要水平+垂直间隙时才该用；多数场景下你真正要的是 gx-3（仅水平）或 gy-2（仅垂直）。
- 旧项目升级后列贴边、间隙消失，大概率是把
.g-3当成纯水平间隙用了——改用gx-3即可 -
.g-0是唯一关闭所有间隙的写法，.no-gutters已废弃 - 嵌套
.row时，外层.col的 padding 会和内层.row的负 margin 抵消不净，必须加mx-n3（BS5）或mx-n2（BS4） -
.container-fluid在 BS5 中默认带padding-left/right: var(--bs-gutter-x)，左右多出空白就加px-0
RTL 页面里 pl-2 导致右边距消失？换用 ps-/pe-
pl-/pr- 在阿拉伯语等 RTL 页面中不会自动翻转，而 ps-（start）/pe-（end）会通过 CSS 逻辑属性适配方向。
- 错误写法：
.card { padding-left: 1rem; }→ RTL 下左边距还在，右边距卡死 - 正确做法：统一用
ps-3替代pl-3，用pe-2替代pr-2 - 确保 HTML 根节点有
dir="rtl"，否则 Bootstrap 的 RTL 规则不触发 -
px-/py-不受影响，它们始终作用于 inline/block 轴，无需改动
响应式间距写错断点顺序？md:pt-4 是无效类名
断点前缀必须紧贴方向后缀，格式是 {property}{sides}-{breakpoint}-{size}，比如 pt-md-4，不是 md-pt-4 或 pt-md4。
- 常见错误：
mb-sm-2 mb-md-0写成mb-sm-2 mb-md0（漏掉连字符）、text-center md:text-right（断点前缀位置错） - 断点链必须补全：
.row-cols-1 .row-cols-sm-2 .row-cols-md-3，漏掉.row-cols-1会导致 xs 下列宽异常 -
lh-和text-类支持断点，但ls-（letter-spacing）官方没提供，得自己写媒体查询或内联 style - 自定义 CSS 中复用 Bootstrap 断点变量（如
$grid-breakpoints），别硬写@media (min-width: 768px)——版本一升级就错位
最易被忽略的点：所有间距类都基于 $spacers Sass 变量生成，改了这个变量，m-1 到 m-5 全部重算；但如果你只在某处覆盖 .mt-3 { margin-top: 2rem !important }，整个项目所有 mt-3 都会变，且无法追溯来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
