bootstrap 默认行高为无单位比值（如1.5），仅随字体大小缩放，不响应视口；需用 clamp(1.1, 2.8vw, 1.5) 实现平滑自适应，或退而采用媒体查询动态调整根字号配合 rem 行高，并避免 em、px 及静态工具类的误用。
Bootstrap 默认的 line-height 是无单位比值（如 1.5），它只随当前字体大小缩放，而字体大小若没响应式变化，行高就根本不会“动”。想让文字在小屏紧凑、大屏舒展，必须把行高和视口或根字号挂钩，不能只依赖 Bootstrap 内置工具类。
用 clamp() 实现平滑自适应行高（推荐）
这是目前最简洁、可控的方式，尤其适合现代项目（Chrome 88+、Firefox 79+、Safari 13.1+ 支持）。clamp() 让行高随屏幕宽度线性过渡，避免媒体查询断点跳跃。
-
clamp(1.1, 2.8vw, 1.5)表示：最小 1.1 倍、基准值为视口宽度的 2.8%，最大封顶 1.5 倍；小屏时取 1.1，桌面屏趋近 1.5，中间平滑过渡 - 不要直接写
line-height: clamp(1rem, 2vw, 1.6rem)——rem和vw混合单位在clamp()中无效，必须统一为无单位数值或纯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）
如果你必须支持 IE 或旧版 Edge，clamp() 不可用，就得退回到媒体查询方案。核心是让所有行高基于 html 根字体大小，再动态调这个根字号。
- 先设基础：
html { font-size: 16px; } - 小屏下调根字号：
@media (max-width: 576px) { html { font-size: 14px; } } - 大屏上调：
@media (min-width: 992px) { html { font-size: 18px; } } - 然后所有行高用
rem：p { line-height: 1.4rem; }——这样 1.4rem 在小屏 = 14×1.4 = 19.6px，在大屏 = 18×1.4 = 25.2px - 别给
body设line-height: 1.5就以为全局生效，它只影响直接子元素，且嵌套后易失控
别踩这些坑：em、px、lh-* 工具类的局限
Bootstrap 的 lh-sm/lh-base 等工具类只是静态值（lh-sm = line-height: 1.25），不带断点前缀，无法实现「sm 下用 1.2、lg 下用 1.6」这种需求。
-
em行高会继承父级font-size，嵌套深了极易失真，比如.card .h5里再套p，行高可能被放大两轮 -
px行高（如line-height: 24px）完全不响应，小屏下文字挤成一团，大屏下又太空 -
lh-*类不能叠加断点，class="lh-sm d-lg-block"不会让大屏恢复默认行高，它只是控制显示/隐藏，不是切换样式 - 给
.form-control或textarea硬设line-height很危险：textarea 忽略line-height，select 在 Safari 中可能失效
为什么改了行高，Modal 还是滚动错位？
这不是行高本身的问题，而是 DOM 高度重绘延迟。当 Modal 已打开、你缩放窗口时，.modal-body 的高度不会自动重算，导致内容溢出或滚动条卡住。
- 临时解法：监听
resize事件，手动触发.modal-body重排（如el.style.minHeight = el.scrollHeight + 'px'） - 更稳做法：避免在 Modal 内用复杂行高逻辑，优先用
clamp()+ 固定max-height，并设overflow-y: auto - 真正关键点在于：行高从来不是孤立属性，它必须和
font-size、padding、甚至box-sizing协同调整；单独改一个，大概率放大原有不协调
