Bootstrap 5 的 .lh-* 工具类共4个：.lh-1（1rem）、.lh-sm（1.25rem）、.lh-base（1.5rem）、.lh-lg（2rem），均为固定rem值，不继承，不响应字体缩放，且与Sass变量无关。
Bootstrap 5 的 .lh-* 工具类有哪些
Bootstrap 5 内置了四组行高工具类，全部基于 rem 单位，不依赖当前字体大小缩放，值是固定的像素级计算（比如 font-size: 16px 时，.lh-lg 就是 2rem = 32px）：
-
.lh-1→line-height: 1rem（约 16px） -
.lh-sm→line-height: 1.25rem（约 20px） -
.lh-base→line-height: 1.5rem（约 24px，即默认值） -
.lh-lg→line-height: 2rem（约 32px）
它们只作用于直接应用的元素，不会继承给子元素。例如：<p class="lh-sm">文字<small>小字</small></p> 中的 <small></small> 仍用自身默认行高（1.25），不会被父级 .lh-sm 拉高。
为什么加了 .lh-sm 但行高没变
常见原因不是类名写错，而是选择器权重或样式覆盖失效：
- 组件内部硬编码了
line-height，比如.btn、.alert、.badge这些组件在 Bootstrap 源码里直接写了line-height: 1.5或具体像素值，会盖掉工具类 - 你用了自定义 CSS，且规则写在 Bootstrap 之后，但没加
!important，而 Bootstrap 的工具类选择器权重只是单类（.lh-sm），很容易被p span这类组合选择器干掉 -
.lh-*类只设line-height，不改font-size或padding，如果父容器高度固定（如height: 40px），文字可能视觉上“贴顶”或“居中偏上”，误以为没生效
验证方法：打开 DevTools，选中元素，在 Styles 面板里看 line-height 是否被划掉；Computed 面板里查最终值是否符合预期（注意它显示的是像素值，比如 20px，而非 1.25rem）。
想全局调低正文行高，只用 .lh-* 类够吗
不够。这些类是原子化工具，必须手动加到每个需要调整的标签上，无法自动作用于 p、h1、.lead 等所有基础文本元素。
- 若项目已大量使用语义标签（
<p></p>、<h2></h2>），靠补类名维护成本极高，容易漏 -
.lh-*不影响标题行高——.h1到.h6和.display-*类内部都硬编码了line-height，得单独覆盖 - 像
.lead这种排版类，本身设置了line-height: 1.6，会覆盖你加在父容器上的.lh-sm
真正要全局统一，还是得走 CSS 覆盖路线：html body { line-height: 1.4; } 或重定义 Sass 变量（见下一条）。
Sass 变量 $line-height 和工具类的关系
Bootstrap 5 的 $line-height 变量（默认 1.5）只控制基础排版类的生成逻辑，比如 .lead、p、blockquote 的默认行高，但它和 .lh-* 类完全无关——后者是独立写的固定 rem 值，编译后不读变量。
- 改
$line-height必须在@import "bootstrap/scss/variables"之前重定义，且仅对从该变量派生的样式生效（如p、ul li） -
.lh-*类的值写死在_utilities.scss里，不受变量影响；即使你把$line-height改成1.2，.lh-base还是1.5rem - 标题行高由另一个变量
$headings-line-height控制（默认1.2），它也不影响.lh-*
所以别指望改一个变量就让所有地方行高同步变化；.lh-* 是“手动手动加”的快捷键，$line-height 是“编译时批量生成”的开关，二者定位不同，混用时得心里有数。
