Bootstrap如何让文字在不同屏幕尺寸下显示不同的行高（Leading）-Bootstrap教程-PHP中文网

bootstrap 5 原生不支持响应式行高工具类（如 lh-sm-1），需通过 sass 扩展 utility api，结合 $grid-breakpoints 和 media-breakpoint-up 生成断点专属类（如 .lh-sm-1、.lh-md-2），用无单位值确保自适应，并按 html 中类顺序自然覆盖。

bootstrap如何让文字在不同屏幕尺寸下显示不同的行高（leading）

Bootstrap 5 怎么用 utility class 控制不同断点的 line-height

Bootstrap 5 原生不提供 lh-*@sm、lh-*@md 这类响应式行高工具类。直接写 lh-lg 或 lh-1 只会作用于所有屏幕尺寸，没法随 viewport 切换。

想实现“小屏紧凑、大屏舒展”，得靠自定义 CSS + Bootstrap 断点命名规则，或者用内联 style 配合媒体查询——但后者难维护。推荐方案是扩展 Bootstrap 的 utility API。

在 _custom.scss（或你的主 SCSS 文件）里复用 Bootstrap 的 $spacers 和 $grid-breakpoints
定义一套 lh-sm-1、lh-md-2、lh-lg-3 类，每个对应一个断点下的 line-height 值
注意：不要覆盖默认 lh- 类，避免冲突；前缀用 lh-{breakpoint}- 更清晰

怎么写一个响应式 line-height 的自定义 utility

比如你想让文字在 md 及以上用 line-height: 1.6，sm 下用 1.4，可以这样写：

@each $breakpoint, $value in $grid-breakpoints {
  @include media-breakpoint-up($breakpoint) {
    .lh-#{$breakpoint}-1 { line-height: 1.4; }
    .lh-#{$breakpoint}-2 { line-height: 1.6; }
    .lh-#{$breakpoint}-3 { line-height: 1.8; }
  }
}

编译后会生成类似：

@media (min-width: 576px) {
  .lh-sm-2 { line-height: 1.6; }
}
@media (min-width: 768px) {
  .lh-md-2 { line-height: 1.6; }
}

然后在 HTML 中按需组合：<p class="lh-sm-1 lh-md-2 lh-lg-3">正文</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a> <p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p> </div> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>。越靠后的断点类优先级越高，能自然覆盖。