Bootstrap默认行高为无单位比值（如1.5），仅随字体大小缩放，不响应视口变化；需用clamp()（如clamp(1.1, 2.8vw, 1.5)）或媒体查询+根字号调整实现真正响应式行高，避免混用单位、全局滥用及依赖静态工具类lh-*。
Bootstrap 默认的 line-height 不会随屏幕变化——它只是个无单位比值（比如 1.5），只跟着当前字体大小缩放；而字体大小若没响应式调整，行高就完全“静止”。想让小屏紧凑、大屏舒展，必须主动挂钩视口或根字号，不能依赖 lh-sm 这类静态工具类。
用 clamp() 实现平滑自适应行高（现代项目首选）
这是目前最直接、可控的方式，无需写一堆媒体查询，浏览器支持已覆盖 Chrome 88+、Firefox 79+、Safari 13.1+。
-
clamp(1.1, 2.8vw, 1.5)表示：最小 1.1 倍、基准为视口宽度的 2.8%、最大封顶 1.5 倍；小屏取 1.1，桌面屏趋近 1.5，中间线性过渡 - 别混用单位：
line-height: clamp(1rem, 2vw, 1.6rem)是无效的——clamp()内部必须统一为无单位数值（如1.2）或纯vw/rem，不能混合 - 单独调行高效果有限：建议同步配
font-size: clamp(0.875rem, 2.5vw, 1rem)，否则字号不变只调行高，视觉会失衡 - 局部生效更安全：比如 Modal 内文字，直接写
.modal-body p { line-height: clamp(1.1, 2.8vw, 1.5); }，避免污染全局p
用媒体查询 + rem 手动控制（兼容 IE 或旧 Edge）
当 clamp() 不可用时，退回到这套组合：动态调 html 根字号，再让所有行高基于 rem 计算。
- 基础设定：
html { font-size: 16px; } - 小屏下调：
@media (max-width: 576px) { html { font-size: 14px; } } - 大屏上调：
@media (min-width: 992px) { html { font-size: 18px; } } - 行高写法：
p { line-height: 1.4rem; }——这样在小屏是14px × 1.4 = 19.6px，大屏是18px × 1.4 = 25.2px - 别给
body设line-height: 1.5就以为全局生效：它只影响直接子元素，嵌套后易失控，且不响应缩放
为什么 lh-sm / lh-base 类无法实现真正响应式行高
Bootstrap 的 lh-* 工具类本质是静态 CSS 规则，不带断点前缀，也不随视口或根字号变化。
-
lh-sm固定为line-height: 1.25，lh-lg固定为line-height: 2，它们不会在md断点下自动切换 -
class="lh-sm d-lg-block"不会让大屏恢复默认行高——d-lg-block只控制显示/隐藏，不是样式切换 -
em行高会继承父级font-size，嵌套深了（比如.card .h5 p）容易放大两轮，导致行距爆炸 -
px行高（如line-height: 24px）完全不响应，小屏下文字挤成一团，大屏下又太空
改 Sass 变量控制全局行高（仅限编译项目）
如果你用 Sass 编译 Bootstrap，$line-height 只影响 body、p 等基础元素，其他组件有各自变量，必须分别覆盖。
-
$line-height: 1.4→ 控制正文段落 -
$btn-line-height: 1.4→ 控制按钮内文字垂直居中 -
$input-line-height: 1.4→ 控制.form-control内容对齐 -
$headings-line-height: 1.2→ 控制标题行距（默认比正文小） - 硬写 CSS 覆盖基本无效：Bootstrap 组件内联计算的
line-height权重更高，容易被覆盖失效
真正难的不是写哪一行代码，而是意识到行高从来不是孤立属性——它和 font-size、padding、甚至容器高度共同决定段落呼吸感。改之前先确认字号是否已响应式，否则单调行高只会放大不协调感。
