$line-height变量必须在@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/variables";之前声明，否则无效；还需同步设置$btn-line-height、$input-line-height、$headings-line-height等关联变量。
改 $line-height 变量必须卡在 @import 顺序里
直接在自定义 Sass 文件里写 $line-height: 1.4; 不一定生效——它得出现在 @import "bootstrap/scss/functions"; 之后、@import "bootstrap/scss/variables"; 之前。否则变量一加载就定死了，你的赋值等于没写。
常见错误包括：
- 把变量声明放在所有
@import后面 - 漏掉
@import "bootstrap/scss/functions";（它是变量函数依赖的基础） - 拼错变量名，比如写成
$line_height或line-height（Sass 不认连字符外的下划线或无美元符）
正确结构示例：
$line-height: 1.4; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot";
只改 $line-height 不够，按钮和输入框会“贴顶”
$line-height 只控制 body、p、ul 这类基础排版元素。但 .btn 用的是 $btn-line-height，.form-control 依赖 $input-line-height，.h1～.h6 走的是 $headings-line-height（默认 1.2）。它们互不关联，改一个不会联动。
所以如果你调低了正文行高，但发现按钮文字上浮、输入框内容偏高，要同步补上：
$btn-line-height: 1.4;$input-line-height: 1.4;-
$headings-line-height: 1.4;（如果想标题和正文视觉一致）
漏掉任一，对应组件就会维持原行高，破坏整体节奏。
用 .lh-* 工具类只能局部微调
Bootstrap 5 提供了 .lh-sm、.lh-base、.lh-lg 这类工具类，但它们是固定 rem 值（如 .lh-sm = 1.25rem），不随字体大小缩放，也不继承给子元素。
典型失效场景：
- 给
<div class="card"><p class="lh-sm">文字</p></div>加类，但.card-body p的选择器权重更高，工具类被覆盖 - 在
.display-1（字号 5rem）里用.lh-sm，行高仍是 1.25rem，视觉严重压扁 -
.alert、.badge等组件源码硬编码了line-height: 1.5，工具类根本进不去
这类类名适合临时救急，比如某段说明文字需要紧凑一点，别指望它替代全局配置。
预编译 CSS 下变量完全无效，只能靠 CSS 覆盖
如果你项目里直接引入的是 bootstrap.min.css，那所有 Sass 变量修改都白搭。此时只能写 CSS 覆盖，但要注意三点：
- 别只写
body { line-height: 1.4; }——reboot.scss给p、h1～h6单独设了规则，得分别覆盖：p { line-height: 1.4; }、h2 { line-height: 1.3; } - 提高选择器权重比
!important更可控，比如用html body p或:root p - 改完务必打开 DevTools 的 Computed 面板，确认最终生效的
line-height值来源，避免被隐藏的高权重规则覆盖
真正麻烦的不是改哪一行，而是改完后所有依赖垂直对齐的组件——.btn、.input-group、.navbar——都得重新 eyeball 一遍是否错位。这种连锁反应最容易被忽略。
