bootstrap 5 的 lh-1、lh-sm、lh-base、lh-lg 工具类分别对应 line-height: 1、1.25、1.5、2，均为无单位倍数且硬编码；lh-base 固定为 1.5，不随 $line-height 变量变化，且易被组件内联样式覆盖。
lh-1、lh-sm、lh-base 这些类到底对应什么值
Bootstrap 5 的 lh-* 工具类是硬编码的 CSS 类，不是变量计算出来的。它们直接写死 line-height 值，不依赖字体大小变化：
-
lh-1→line-height: 1（无单位，纯倍数） -
lh-sm→line-height: 1.25 -
lh-base→line-height: 1.5（即默认正文行高） -
lh-lg→line-height: 2
注意：lh-base 不等于“自动继承 Bootstrap 默认”，它就是个固定值 1.5；如果你改过根字体或自定义了 $line-height 变量，这个类也不会跟着变。
为什么加了 lh-sm 却没生效
常见原因不是类名写错，而是被更高优先级规则覆盖：
- 组件内部硬编码了
line-height，比如.btn、.alert、.form-control都在自己的样式里写了line-height，会盖掉lh-sm - 用了
.h1～.h6或.display-*类，它们自带line-height，且选择器权重比lh-sm高 - 自定义 CSS 里写了
p { line-height: 1.6; }且放在 Bootstrap 之后，也会压过工具类
验证方法：打开 DevTools，选中元素，看 line-height 属性上有没有被划掉的线——被划掉的说明被覆盖了。
想全局统一用 lh-sm，但又不想每个标签都加类
别试图用 * { line-height: 1.25; }，那会破坏所有组件的垂直节奏。更实际的做法是按语义批量覆盖：
- 正文段落：
p { line-height: 1.25; } - 标题类（如果也要收紧）：
.h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.2; }（注意$headings-line-height变量只影响 Sass 编译，不影响已加载的 CSS） - 避免影响表单控件：
input:not([type="submit"]):not([type="button"]), textarea, select { line-height: inherit; }，防止文字贴顶
关键点：Bootstrap 的 reboot.scss 给 p、h1–h6、blockquote 等都设了独立 line-height，必须逐个覆盖，不能只靠一个工具类撑全场。
响应式行高怎么配 lh-* 类
Bootstrap 5 没有内置 lh-sm-md 这样的响应式行高类。真要适配不同屏幕，得自己补：
- 移动端希望更紧凑？加媒体查询：
@media (max-width: 768px) { p { line-height: 1.3; } } - 别用
em或rem写line-height，比如line-height: 1.25rem是固定像素值，失去响应性；始终用无单位数值（如1.25） - 如果项目用了自定义根字体（如
:root { font-size: 18px; }），无单位line-height会自动按比例缩放，这才是正确姿势
真正容易被忽略的是：行高改动后，padding 和 height 的视觉平衡会偏移——比如 .btn 高度 = font-size × line-height + padding，调小 line-height 后若不微调 padding，按钮就会显得“矮胖”或文字下沉。
