bootstrap 5 的辅助类统一归入 utilities 体系，间距类命名格式为 {property}{sides}-{size}，需注意 rtl 适配、尺寸映射及 gap 优先；浮动类仅限文字环绕场景，日常布局应使用 d-* 类；背景类需手动配文字色；居中按场景选 text-center、mx-auto 或 d-flex；工具类后写覆盖先写且带 !important。
Bootstrap 5 没有叫 HelperClasses 的独立类集合，所有“辅助类”都统一归入 utilities（工具类）体系，直接写在 HTML 中生效，无需额外引入或初始化。
间距类（mt-3、p-2、gap-4）怎么用才不踩坑
命名是 {property}{sides}-{size}，比如 mt-3 是 margin-top: 1rem，px-4 是 padding-left + padding-right 各 1.5rem。注意三点：
-
s和e代替l/r，适配 RTL 布局；LTR 下s=left、e=right - 尺寸值
0～5对应预设 rem 值，auto只对 margin 有效（如mx-auto居中） - flex 容器内优先用
gap（如gap-3），它比给每个子项加mb-3更干净，且不会影响第一个/最后一个元素的外边距
显示与浮动类（d-none、float-start、d-flow-root）的实际取舍
float-start 和 float-end 是 Bootstrap 5 中仅存的浮动类，但它们只该用于文字环绕图片这类语义化排版；日常布局别碰。真正该掌握的是：
-
d-none/d-md-block控制显隐，断点前缀必须紧跟d-，写成d-md-none才对，hidden类已彻底移除 - 父容器要包住浮动子项？别用
.clearfix—— 直接上d-flow-root，它创建 BFC，安全不裁剪下拉菜单或阴影 -
float-start在 flex 或 grid 容器里基本失效，因为父容器的 display 会覆盖 float 行为
背景与文字颜色类（bg-primary、text-white）配色逻辑
Bootstrap 5 的背景类（如 bg-primary）默认不改文本色，所以必须手动配 text-white 或 text-dark。常见组合有：
-
bg-primary text-white、bg-success text-white—— 亮底深字用text-dark，比如bg-warning text-dark -
bg-body和bg-white看似一样，但bg-body跟随 CSS 自定义属性--bs-body-bg，更适配主题切换 -
bg-transparent不是空类，它显式设置background-color: transparent，能覆盖掉组件自带的背景色
居中类（text-center、d-flex + justify-content-center）选哪个
三类居中场景对应不同解法，混用会失效：
- 段落/按钮等内联内容水平居中 →
text-center（作用于父容器） - 块级元素水平居中（如 div）→
mx-auto（需设宽度）或d-flex justify-content-center - 绝对居中（水平+垂直）→ 父容器加
d-flex align-items-center justify-content-center，子项无需设宽高 - 注意：
text-center对 flex 子项无效；justify-content-center在非 flex 容器里也不起作用
最易被忽略的是 utilities 的层叠顺序：多个间距类同时存在时，后写的会覆盖先写的（比如 mt-2 mt-4 最终生效的是 mt-4）；另外所有工具类都带 !important，所以自定义 CSS 想覆盖它们，要么提高选择器权重，要么用 style 内联 —— 但后者破坏可维护性。
