不能直接叠加自定义排版类，因为.col类已声明flex: 1 0 0%和min-width: 0，会干扰text-center等类的渲染；安全扩展需复刻Bootstrap命名规范、使用map-merge注入$utilities并启用responsive: true。
为什么不能直接在 .col 上叠加自定义排版类
因为 Bootstrap 5 的 .col 类内部已声明 flex: 1 0 0% 和 min-width: 0，任何外部排版类（如 text-center、fw-bold）若未加权或未作用于正确层级，会被其父级 .row 的 flex 布局或自身 display: flex 行为干扰。常见现象是文字居中失效、行高错乱、字体粗细不响应。
如何安全地扩展排版工具类（不破坏断点逻辑）
Bootstrap 5 的排版工具类（如 text-start、lh-lg）本质是原子 CSS，扩展时必须复刻其命名规范与作用域逻辑，否则响应式断点（text-md-center）会失效。
- 所有新类名必须带断点前缀（
text-xl-super），且只在对应@media下生效，不可全局覆盖text-*基础类 - 避免用
!important；改用更具体选择器，例如.text-xl-super:not(.text-sm-start)防止小屏类覆盖 - 若需新增行高值，不要硬写
line-height: 2.5，而应复用 Bootstrap 的$spacers变量体系，比如lh-xxl { line-height: map-get($spacers, 6); } - 字体大小类扩展必须同步更新
font-size和line-height，否则移动端文字会挤在一起——Bootstrap 默认fs-5对应font-size: 1rem; line-height: 1.2，二者耦合
自定义类如何与 row-cols-* 共存而不冲突
当使用 row-cols-5 均分列宽时，子项 .col 是 flex item，其内部文字排版类（如 text-truncate、fst-italic）仍有效，但以下操作会出问题：
- 在
.col上直接写style="text-align: right"：会覆盖text-end工具类，且无法响应断点 - 给
.col加d-flex flex-column后再套text-center：此时text-center作用于 flex 容器内文本，但若子元素是<p class="mb-0"></p>，它仍按块级渲染，需额外加align-self-center - 对
.col使用lh-1但内容含<br>
：Bootstrap 的lh-*类只设line-height，不重置margin，<br>
产生的空行高度仍由默认margin-bottom控制
最简可行的自定义排版类写法（SCSS + CSS）
在引入 Bootstrap SCSS 前，定义变量并注入新类，确保编译后与原生工具类同权重：
立即学习“前端免费学习笔记（深入）”；
$theme-colors: (
"super": #2d3748
);
$utilities: map-merge(
$utilities,
(
"text-super": (
property: color,
values: (super: map-get($theme-colors, super)),
responsive: true,
print: true
),
"lh-xxl": (
property: line-height,
class: lh-xxl,
values: (xxl: 2.8),
responsive: true
)
)
);关键点：必须用 map-merge 扩展 $utilities，不能新建独立 SCSS 文件后 @import，否则生成的 CSS 规则优先级低于 Bootstrap 原生工具类，断点类（如 text-md-super）也不会自动产出。
真正容易被忽略的是：自定义排版类一旦启用 responsive: true，就必须在所有断点（xs–xxl）下都提供值，哪怕只是复制默认值；漏掉任一断点，该尺寸下类名就不会被编译出来。
