Bootstrap如何让文字在屏幕下显示不同的行高对齐-Bootstrap教程-PHP中文网

bootstrap 默认行高不响应屏幕尺寸，需手动编写媒体查询或自定义响应式类（如 .lh-sm），因其未提供内置 lh-* 断点工具类；避免内联样式与 js 动态设置，优先使用无单位数值和 css 媒体查询。

行高在不同屏幕尺寸下不生效？检查 css 媒体查询作用域

bootstrap 默认的 line-height 是全局统一的，不会随屏幕尺寸自动变化。想让文字在 sm、md、lg 等断点下有不同行高，必须手动覆盖或添加响应式类——bootstrap 本身不提供 line-height-sm 这类内置工具类（v5.3 仍无）。

常见错误是直接写 class="line-height-1 line-height-md-2"，结果全屏都用 line-height-1，因为后者根本不存在。

Bootstrap 的响应式工具类只覆盖部分样式（如 font-size、text-align），line-height 不在其中
不能依赖 fs-* / fw-* / lh-* 中的 lh-* 类做响应式——它们全是固定值，无断点变体
若用 Sass 版本，可基于 $spacers 或 $line-heights 自定义，但需编译

用 Bootstrap 的断点类 + 自定义 CSS 最可靠

最直接的方式：写自己的响应式类，复用 Bootstrap 的断点命名逻辑（sm、md 等），再配合 @media。

.lh-sm { line-height: 1.2; }
@media (min-width: 576px) {
  .lh-sm { line-height: 1.3; }
}
@media (min-width: 768px) {
  .lh-sm { line-height: 1.4; }
}

这样就能在 HTML 中写：<p class="lh-sm">文字</p>，且不同宽度下自动切换。

避免用 !important，优先提高选择器权重（比如加父容器类）
注意单位：用无单位数值（如 1.4）比 px 或 em 更安全，它会相对于当前 font-size 缩放
如果项目已引入 Bootstrap Sass，可在 _custom.scss 里用 each 循环生成批量类，例如 lh-sm-1-2、lh-md-1-5

用内联 style 或 JS 动态设置？不推荐

虽然可以用 style="line-height: calc(1.2 + 0.1 * (100vw - 320px) / 320)" 做流式行高，但实际效果难控，且与 Bootstrap 的断点体系脱节。

VPS Bootstrap

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

下载

JS 方案（监听 resize 并改 style.lineHeight）更重，还可能触发重排，对性能和可维护性都不友好。

行高不是高频动态属性，没必要 JS 控制
内联 style 无法被媒体查询覆盖，调试时容易被忽略
若真要流式，建议用 CSS clamp()，但需确认目标浏览器支持（clamp(1.2, 0.8rem + 2vw, 1.6) 仅适用于 font-size，line-height 直接 clamp 效果不稳定）