bootstrap 5 不支持带断点的行高工具类，仅提供 lh-1、lh-sm、lh-base、lh-lg 四个全局生效的固定值；响应式行高需用 clamp() 或媒体查询配合根字号实现，并注意避免 em 继承放大、px 不响应等常见错误。
Bootstrap 5 没有 lh-md 或 lh-lg 这类断点行高类
别浪费时间在文档里搜 lh-xl——Bootstrap 官方只提供 lh-1、lh-sm、lh-base、lh-lg 四个固定值工具类，它们**不带断点前缀**，也不能组合出「小屏用 1.2，大屏用 1.6」的效果。写 class="lh-sm text-lg-center" 不会改变 lg 下的行高，lh-sm 在所有断点下都生效。
想按断点设不同 line-height，只能靠自定义 CSS
推荐两种实操路径，按项目兼容性选：
- 现代项目（Chrome 88+ / Firefox 79+ / Safari 13.1+）：用
clamp()实现平滑过渡p { line-height: clamp(1.1, 2.8vw, 1.5); }
注意：必须用无单位数值（1.1、1.5），不能混用rem和vw；搭配响应式字号效果更稳 - 需兼容 IE 或旧 Edge：用媒体查询 +
rem配合根字号调整@media (max-width: 576px) { html { font-size: 14px; } }@media (min-width: 992px) { html { font-size: 18px; } }
再统一设p { line-height: 1.4rem; }
别踩这些坑
常见错误直接对应到代码表现：
-
em行高会层层继承放大，比如父级font-size: 1.2rem+line-height: 1.5em，子元素再设font-size: 0.8rem，实际行高变成1.2 × 16 × 1.5 = 28.8px，不是你预期的0.8 × 16 × 1.5 -
px行高（如line-height: 24px）完全不响应，小屏下文字挤成一团，大屏下空得离谱 - 给
body设line-height: 1.4，结果.card .card-body p没变化——因为 Bootstrap 的.card-body里写了更具体的选择器覆盖了它 - 改了
$line-height变量，但按钮文字还是贴顶——漏了同步改$btn-line-height和$input-line-height
局部临时调整，lh-* 类还能用，但要懂限制
如果只是某段 <p></p> 或某个 <div> 需微调，<code>lh-sm 这类工具类仍可快速上手，但得清楚边界：
- 它只作用于当前元素，
<small></small>、<span></span>等子元素不会继承 - 组件内部硬编码了
line-height（比如.btn、.alert），加lh-sm会被无视 -
.h1～.h6和.lead自带行高，会盖掉父容器上的lh-* - 验证是否生效，直接看 DevTools 的 Computed 面板——最终值显示为像素（如
20px），不是1.25rem
font-size 是否已响应式，否则单动 line-height 只会让排版更失衡。
