bootstrap 5 不提供响应式 line-height 工具类（如 lh-sm-1），.lh-* 类均为静态固定值；需通过自定义媒体查询或 scss mixin 结合断点变量实现响应式行高，且推荐使用无单位数值（如 1.4）避免嵌套失真。

Bootstrap 5 中用 line-height 类控制响应式行高不生效？

直接写 line-height 的 CSS 类（比如 .lh-1）在 Bootstrap 5 里是静态的，不随屏幕尺寸变化——它没有内置响应式 line-height 工具类。想让文字在 sm、md、lg 下用不同行高，得自己扩展或组合使用现有工具。

用 Bootstrap 断点前缀 + 自定义 CSS 实现响应式行高

Bootstrap 的响应式工具类命名规则（如 fs-sm-4）只覆盖字体大小、粗细、颜色等，没覆盖 line-height。最稳妥的做法是手写媒体查询，复用 Bootstrap 的断点变量：

VPS Bootstrap

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

下载

• 在自定义 CSS 文件中按 Bootstrap 5 的断点写，例如：

  @include media-breakpoint-up(md) {
    .lh-responsive {
      line-height: 1.4;
    }
  }
  @include media-breakpoint-down(sm) {
    .lh-responsive {
      line-height: 1.2;
    }
  }

• 确保你引入了 Bootstrap 的 SCSS 变量（_variables.scss）和 mixin（_mixins.scss），否则 media-breakpoint-up 会报错
• 如果只用 CDN 版本（CSS 不含 SCSS），就改用原生媒体查询：

  @media (max-width: 575.98px) {
    .lh-responsive { line-height: 1.2; }
  }
  @media (min-width: 768px) {
    .lh-responsive { line-height: 1.5; }
  }

为什么不能直接套用 fs- 类名逻辑仿写 lh- 响应类？

Bootstrap 官方没提供 lh-sm-1 这类类名，不是遗漏，而是有意为之：行高与字体大小耦合度高，单独响应式调整容易破坏垂直节奏。实际项目中更推荐：

• 优先用 font-size 响应类（如 fs-sm-5 fs-lg-6）+ 统一行高（如 lh-base），靠字体缩放自然带动行高变化
• 若必须独立控制，把 line-height 写成无单位数值（如 1.4），避免在不同字号下产生意外倍数放大
• 警惕 rem 或 em 单位的 line-height：它们会继承父级字号，在嵌套组件里容易层层叠加失真

移动端文字“看起来没对齐”？先检查 line-height 和 padding 的叠加效果

很多所谓“行高不对齐”问题，其实来自 line-height 和上下 padding / margin 的视觉干扰，尤其在按钮、卡片标题里：

• 用浏览器开发者工具选中文字元素，看 computed 样式里的 line-height 实际值是否符合预期
• 如果用了 display: flex + align-items: center，line-height 对垂直居中基本无效，该用 flex 布局本身对齐
• Android WebView 和旧版 Safari 对小数值 line-height（如 1.33）渲染有差异，建议用 1.3、1.35 等更“整”的值

真正麻烦的是多层嵌套文本容器里，line-height 会逐级继承又受 font-size 影响，调试时得一层层关掉其他样式才能定位问题。