Bootstrap的m-、p-类名到底对应哪些数值
Bootstrap的间距工具类不是随意命名的，m-1到m-5对应的是预设的rem缩放值（默认0.25rem到3rem），不是像素，也不是固定倍数。改过$spacers Sass变量后，所有m-/p-类都会同步变化——这点常被忽略，导致在自定义主题时样式“突然不对”。
常见错误是看到mt-3就以为是“上边距3px”，结果发现实际是1rem（约16px）。更麻烦的是，m-auto和mx-auto行为不同：前者让元素自身margin自动，后者只作用于左右，且仅对块级元素生效。
-
m-0→margin: 0 !important；my-0→margin-top: 0; margin-bottom: 0 - 方向后缀必须紧跟数值：
mr-2合法，mr2无效 - 响应式写法如
md:p-4只在≥768px生效，小屏下会回退到无类名状态（不是“继承上一级”）
什么时候该用Utility类，而不是自己写CSS
Utility类适合原子化布局控制：比如卡片内一段文字需要“上距父容器1个单位、下距按钮2个单位”，用mt-1 mb-2比新建一个.card-content类更轻量。但一旦出现重复组合（如pt-3 pb-4 px-2在5个地方出现），就该抽成语义类了——否则后期改间距要满项目搜替换，且无法利用CSS变量做主题切换。
性能上没区别，都是普通class；但可维护性差异巨大。尤其团队协作时，mb-5这种写法对新人不友好，不如section-separator直观。
立即学习“前端免费学习笔记（深入）”；
- 单次、临时、与布局强相关的间距 → 用
m-/p- - 有业务含义的间距（如“表单控件之间的标准间隔”）→ 抽成自定义类，内部用
margin-bottom - 需要JS动态增删的间距 → 优先用Utility类，避免操作style属性
padding-left和pl-0在RTL语言下会出什么问题
Bootstrap 5默认启用RTL支持，pl-0在从右向左语言（如阿拉伯语）环境下会被自动转换为pr-0。这是通过CSS逻辑属性（inset-inline-start）实现的，不是靠JS检测。但如果你手动写了padding-left: 0，它不会自动翻转——这就造成RTL页面里左边距消失、右边距反而卡住的诡异现象。
错误示范：
.custom-card { padding-left: 1rem; } 正确做法是统一用ps-3（start方向），或开启Bootstrap RTL构建并信任其工具类。
- 始终用
ps-/pe-代替pl-/pr-，兼容LTR/RTL -
px-和py-在RTL下仍分别作用于inline和block方向，无需改动 - 检查
html[dir="rtl"]是否被正确设置，否则Bootstrap RTL规则不触发
如何覆盖Bootstrap Utility类又不破坏全局
直接写.mt-3 { margin-top: 2rem !important }会污染所有mt-3使用点，极难追溯。更稳妥的方式是加特异性前缀，或用嵌套作用域限制范围。
比如管理后台需要统一加大表格行高间距，不要改my-2，而是写：
.admin-table td { margin-block: 0.75rem; } 或者用CSS自定义属性过渡：:root { --bs-spacer: 1rem; } 这样所有Utility类自动按新基准缩放，且不影响其他模块。
- 避免
!important覆盖Utility类，改用更高特异性选择器（如.page-dashboard .mt-3） - Sass用户可重定义
$spacers，但需确保所有依赖它的组件（如Card、Alert）都重新编译 - 若只需局部调整，用
style="margin-top: 1.5rem"比硬覆盖类更安全——Utility类本就是为快速原型设计的
mb-4等于多少，而是判断这个“4”该不该由设计系统决定、该不该被翻译成var(--spacing-lg)、以及当产品说“移动端上下间距再压缩一点”时，你改的是1个类还是27个文件。 
