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-* 工具类临时调行高靠谱吗？
适合局部微调，比如某段 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a>
<p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 或某个 <div>，但别指望它全局替代变量。这些类本质是加了 <code>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 变量时最容易踩的坑
顺序错、拼写错、版本混，三者任一都会让修改完全失效。
- 必须在导入
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），页面上就会出现某些文字挤在一起、某些又空得离谱的割裂感，这种细节在验收时才暴露，返工代价远高于一开始就把变量列全。
