如何在Bootstrap 5中编写自定义CSS类扩展排版工具类-css教程-PHP中文网

不能直接叠加自定义排版类，因为.col类已声明flex: 1 0 0%和min-width: 0，会干扰text-center等类的渲染；安全扩展需复刻Bootstrap命名规范、使用map-merge注入$utilities并启用responsive: true。

如何在bootstrap 5中编写自定义css类扩展排版工具类

为什么不能直接在 `.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）仍有效，但以下操作会出问题：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

在 .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）下都提供值，哪怕只是复制默认值；漏掉任一断点，该尺寸下类名就不会被编译出来。