Bootstrap间距类m-/p-的数字后缀对应预设rem值：0=0rem、1=0.25rem、2=0.5rem、3=1rem、4=1.5rem、5=3rem，非像素且不随断点缩放；mx-auto/my-auto用于居中，需配合块级或flex容器。
Bootstrap 的实用工具类不是“可选配件”，而是响应式开发的主干——用对了，80% 的自定义 CSS 可以直接删掉。
怎么快速识别 spacing 类（m-/p- 开头）的数值含义
所有 m- 和 p- 类的数字后缀都对应预设的 rem 值，不是像素，也不随断点缩放：0=0rem，1=0.25rem，2=0.5rem，3=1rem，4=1.5rem，5=3rem。注意 mx-auto 和 my-auto 是居中关键，但只对块级或 flex 子项生效；ml-auto 配合 d-flex 才能右对齐按钮组，单独加在 div 上没用。
常见错误现象：
- 写了
mt-5却没看到预期间距 → 检查父容器是否设置了overflow: hidden或子元素是否被position: absolute脱离文档流 - 在 flex 容器里用
mb-3想控制子项间距 → 应该改用gap-3，margin在 flex 里容易被忽略或引发换行
display 控制类（d-*）为什么经常“失效”
d-none 是全局隐藏，而 d-md-block 是“在 ≥768px 时显示为 block”，两者共存时，断点规则会覆盖基类——浏览器按 CSS 优先级从右往左解析，d-md-block 权重更高，所以它生效。但如果你写成 d-md-none d-lg-block，那在 992px+ 会显示，在 768–991px 之间反而隐藏，中间出现“空窗期”。
使用场景和要点：
- 移动端隐藏、桌面显示：用
d-none d-md-block，别用d-sm-none—— sm 是 ≥576px，比手机竖屏还宽，会导致小屏误显 - 打印专用：加
d-print-none，它不参与屏幕断点逻辑，只在 print 媒体下生效 -
invisible不等于d-none：前者保留占位（visibility: hidden），后者完全脱离布局（display: none），表单校验提示常需前者避免页面跳动
text-* 和 bg-* 类的语义陷阱
text-primary 不是固定蓝色，它继承自 Sass 变量 $primary，如果你没改过主题，默认是 #0d6efd，但一旦项目覆盖了变量，所有 text-primary 会同步变色——这是优点，也是坑：有人在调试时发现文字突然变紫，结果是另一个模块悄悄改了 $primary。
容易踩的坑：
-
text-white在深色背景上没问题，但放在bg-light上就看不见，得手动加text-dark覆盖 -
text-truncate必须配合width或max-width才生效，单独加没用；更隐蔽的是，如果父容器用了flex且没设min-width: 0，子项会撑开导致截断失效 -
text-capitalize对中文无效，它只处理空格分隔的单词首字母，别指望它让“hello world”变 “Hello World”，更别想让它处理“你好世界”
flex 和 gap 类在响应式中的断点组合逻辑
d-flex 本身无断点，但你可以加 d-sm-flex d-lg-none 实现“小屏弹性、大屏回归普通流”。真正要注意的是 gap 类——gap-2 是全局生效，而 Bootstrap 5.3+ 才支持响应式 gap，如 gap-md-3。老版本（5.0–5.2）不识别，会直接忽略。
性能与兼容性影响：
- 过度堆砌断点类（比如一个元素写七八个
d-*）会让 HTML 显著膨胀，Vite/HMR 热更新时 DOM diff 会变慢 -
d-grid在 IE11 完全不支持，哪怕加了d-md-grid，IE 下依然 fallback 为 block，别在需要兼容旧浏览器的后台系统里用 -
align-items-center在 flex 容器内才有效，如果父级只是div没加d-flex，这个类就是摆设
最常被忽略的一点：工具类不是万能胶水。当你发现自己反复用 ms-5 微调位置、靠 text-end 强行对齐、甚至给同一个元素加 d-flex d-inline-flex 试图“修复”，说明结构本身已经偏离语义——这时候该回退一步，检查是不是栅格层级错了，或者该用组件封装了。
