Bootstrap 5 中应通过重定义 Sass 变量 $line-height（如 $line-height: 1.4）并在导入 Bootstrap 前声明来全局修改行高，因其由变量驱动且影响 body、p 等基础排版；需同步调整 $btn-line-height、$input-line-height、$headings-line-height 等组件专属变量，避免依赖 !important 或直接改 CSS 导致覆盖失效或维护隐患。

直接改 line-height CSS 值基本无效——Bootstrap 5 的行高由 Sass 变量驱动，硬写 CSS 会被组件内联计算覆盖，尤其是按钮、输入框、标题这些地方。

为什么改了 $line-height 却没生效？

因为 Bootstrap 5 的行高不是靠一个统一 CSS 规则控制的，而是通过多个 Sass 变量分别注入到不同组件中。你只改了 $line-height，但 .btn 用的是 $btn-line-height，.form-control 依赖 $input-line-height，.h1～.h6 走的是 $headings-line-height。这几个变量默认互不关联。

• $line-height: 1.4 只影响 body、p、ul、ol 等基础排版元素
• $btn-line-height: 1.4 才能控制按钮文字垂直居中感，否则会贴顶或下沉
• $input-line-height: 1.4 是让 .form-control 内容不偏上/偏下的关键，尤其当它没设 height 而靠 padding + line-height 推高度时
• $headings-line-height: 1.2 默认比正文小，若想视觉统一，得单独设

用 .lh-* 工具类临时调行高靠谱吗？

适合局部微调，比如某段

或某个

，但别指望它全局替代变量。这些类本质是加了 line-height: 1.25rem 这类固定值，和字体大小耦合，响应式下容易失衡。

• .lh-sm → line-height: 1.25rem（约 20px，假设根字号 16px）
• .lh-base → line-height: 1.5rem（默认值）
• .lh-lg → line-height: 2rem
• 它们不随 font-size 缩放而自适应，比如在 .display-1（字号 5rem）里用 .lh-sm，行高还是 1.25rem，视觉就会压扁

改 Sass 变量时最容易踩的坑

顺序错、拼写错、版本混，三者任一都会让修改完全失效。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 必须在导入 bootstrap/scss/variables 之前 声明变量，否则被默认值覆盖
• 变量名是 $line-height，不是 $line_height 或 line-height——Sass 对连字符敏感，错一个字符就静默忽略
• Bootstrap 4 和 5 不兼容：v4 用 $line-height-base，v5 用 $line-height；直接拷旧代码进 v5 项目，等于没改
• 如果用了自定义构建流程（比如 Webpack + sass-loader），确认你的 _custom.scss 确实参与了编译，而不是只引入了 dist CSS

为什么不能直接在 CSS 里加 !important？

短期看着行，长期维护成本爆炸。一旦未来升级 Bootstrap，或者新增组件（比如 v6 引入 .alert-sm），原有 !important 规则可能被新结构绕过，或者反过来覆盖你其他样式。

• 例如：.alert { line-height: 1.3 !important; } 在 v5 下有效，但 v6 若把 alert 内部结构改成 flex 容器，这个规则就失去作用
• 移动端要适配？还得补 @media (max-width: 768px) { .alert { line-height: 1.2 !important; } }，重复逻辑分散各处
• 多个 !important 规则叠加时，谁赢谁输得靠浏览器计算权重，调试时很难推演

真正要改全局行高，就得动 Sass 变量——这不是“麻烦”，而是 Bootstrap 设计的约束条件。漏掉任何一个相关变量（比如忘了 $btn-line-height），页面上就会出现某些文字挤在一起、某些又空得离谱的割裂感，这种细节在验收时才暴露，返工代价远高于一开始就把变量列全。