只改$line-height变量无效，因Bootstrap 5行高由多个独立Sass变量分组件控制（如$btn-line-height、$input-line-height），且变量必须在@import "bootstrap/scss/functions"后、"variables"前声明才生效。
改 $line-height 变量本身不难，难的是它只管 p、body 这类基础元素，按钮、输入框、标题全都不买账——你调完发现文字在 .btn 里贴顶、在 .form-control 里偏高，不是变量没生效，是压根没动对地方。
为什么只改 $line-height 没用
Bootstrap 5 的行高是「分组件管理」的，不是一套 CSS 规则统管全局。默认值分散在多个 Sass 变量里：
-
$line-height：只影响body、p、ul等基础排版元素 -
$btn-line-height：控制.btn内部文字垂直位置 -
$input-line-height：决定.form-control内容是否居中 -
$headings-line-height：影响.h1～.h6的行距，默认是1.2，比正文小
漏掉任一，对应组件就会维持原行高，视觉节奏立刻断裂。
必须卡准 Sass 导入顺序才能生效
变量声明的位置比内容还关键——Sass 加载时按顺序覆盖，$line-height 必须出现在 @import "bootstrap/scss/functions" 之后、@import "bootstrap/scss/variables" 之前，否则等于白写。
- 错误写法：
@import "bootstrap/scss/variables"; $line-height: 1.4;→ 变量已加载完毕，赋值无效 - 正确结构：
$line-height: 1.4; $btn-line-height: 1.4; $input-line-height: 1.4; $headings-line-height: 1.4; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot";
- 别漏
@import "bootstrap/scss/functions"——它是后续变量计算的基础，缺了会导致编译报错或静默失效
用 .lh-* 工具类只能救急，不能替代变量
Bootstrap 5 提供的 .lh-sm、.lh-base、.lh-lg 是固定值（如 line-height: 1.25rem），它们不随字体大小缩放，也不响应视口变化。
- 在
.display-1（字号5rem）里加.lh-sm，行高仍是1.25rem，视觉严重压扁 -
.alert、.badge等组件源码硬编码了line-height: 1.5，工具类根本进不去 - 选择器权重低，容易被
.card-body p这类更具体规则覆盖
这类类名适合临时微调某段说明文字，别指望它统一整站行高节奏。
直接引入 bootstrap.min.css 就别碰 Sass 变量了
如果你项目里用的是预编译 CSS 文件（比如通过 CDN 或 npm install bootstrap 后直接 link bootstrap.min.css），所有 Sass 变量修改都完全无效——变量只在编译阶段起作用，运行时不存在。
- 此时唯一可行路径是 CSS 覆盖：
p { line-height: 1.4; }、.btn { line-height: 1.4; } - 注意选择器 specificity：Bootstrap 的
reboot.scss给p单独设了line-height，直接写body { line-height: 1.4; }很可能被忽略 - 调试时务必打开浏览器开发者工具的 Computed 面板，确认最终生效的
line-height值和它的来源
真正麻烦的不是改哪一行代码，而是你得先搞清自己用的是 Sass 编译流程还是预编译 CSS，再决定走变量重定义还是 CSS 覆盖——这两条路互斥，混着来只会浪费时间。
