bootstrap 5 中应通过重定义 sass 变量 $line-height（如 $line-height: 1.4）并在导入 bootstrap 前声明来全局修改行高，因其由变量驱动且影响 body、p 等基础排版；需同步调整 $btn-line-height、$input-line-height、$headings-line-height 等组件专属变量，避免依赖 !important 或直接改 css 导致覆盖失效或维护隐患。
Bootstrap 5 中修改 $line-height Sass 变量最稳妥
直接改 CSS 的 line-height 值容易被组件样式覆盖，尤其在 .btn、.form-control 或排版类（如 .h1）里会失效。Bootstrap 5 的行高逻辑全由 Sass 变量驱动，改 $line-height 才能全局生效。
实际操作就是：在你自定义的 Sass 文件（比如 _custom.scss）里，必须在导入 Bootstrap 源文件之前重定义变量：
$line-height: 1.4; // 覆盖默认的 1.5 @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ...其余 import
- 变量名是
$line-height，不是$line_height或line-height—— 错一个字符就无效 - 这个值会影响
body、p、ul、ol等基础排版，但不会自动更新按钮或输入框内部的行高计算，因为它们用的是$input-line-height、$btn-line-height等独立变量 - 如果你只改了
$line-height却发现按钮文字还是挤在一起，说明得顺手补上$btn-line-height: 1.4;
覆盖特定组件的 line-height 用 !important 是下策
比如你只想调低 .alert 的行高，又不想动 Sass 编译流程，可以加一条 CSS：
.alert {
line-height: 1.3 !important;
}
但这会带来维护隐患：
-
!important容易和未来升级的 Bootstrap 版本冲突（比如 v6 改了 alert 结构） - 一旦多个地方都靠
!important补丁，最终谁覆盖谁很难推演 - 移动端响应式断点里，你可能还得写
@media (max-width: 768px) { .alert { line-height: 1.2 !important; } }，重复劳动
Bootstrap 4 和 5 的行高变量命名不兼容
如果你还在用 Bootstrap 4，变量名是 $line-height-base，不是 $line-height。直接把 v4 的自定义代码拷到 v5 项目里，$line-height-base 会被忽略，页面行高依然走默认值 1.5。
- v4：
$line-height-base: 1.4; - v5：
$line-height: 1.4; - 别漏掉
$headings-line-height（控制.h1–.h6），它默认是1.2，和正文不同步
浏览器 DevTools 里看到的 line-height 值为什么和你设的不一样
常见现象：你在 Sass 里设了 $line-height: 1.4，编译后检查 body 元素，Computed 面板却显示 22.4px（假设字体大小是 16px）。这不是出错，是正常计算结果 —— Bootstrap 的 $line-height 是无单位数值，浏览器会乘以当前 font-size 得到像素值。
- 如果父元素
font-size是14px，那实际行高就是14 × 1.4 = 19.6px - 别在 DevTools 里搜
line-height: 1.4，要查 Computed 值，或看 Styles 面板里是否命中了body { line-height: 1.4; } - 用 rem/em 设置字体时，行高会随缩放动态变化；用 px 固定字体，则行高也固定 —— 这点常被忽略，导致响应式场景下文字“发虚”或“粘连”
grep -r "line-height" node_modules/bootstrap/scss/ 看一眼，比猜强。
