讲师中心 微信公众号
AI工具推荐 视频效率加速

Bootstrap 5 文本行间距调整 Leading样式

落枫同学_2961

落枫同学_2961

发布时间:2026-04-21 22:13:26

|

766人浏览过

|

来源于php中文网

原创

Bootstrap 5 中行高由 Sass 变量 $line-height-base(默认 1.5)控制,仅影响基础排版类;修改需按正确顺序导入 Sass 文件,预编译 CSS 下无效,须用 CSS 覆盖或组件重写,并注意按钮等组件需同步调整 padding 防文字贴顶,响应式场景必须使用无单位数值。

bootstrap 5 文本行间距调整 leading样式

line-height 在 Bootstrap 5 中不是靠 “leading” 类控制的——它压根没有 leading- 这类工具类。Tailwind 有,Bootstrap 没有。想调文本行高,得走变量、CSS 覆盖或组件级重写三条路。

修改 $line-height-base 变量必须卡准 Sass 加载顺序

Bootstrap 5 的基础行高由 Sass 变量 $line-height-base 控制,默认值是 1.5。但它只在 @import "bootstrap/scss/variables" 之前被读取一次,且依赖 @import "bootstrap/scss/functions" 已加载。

  • 错误写法:@import "bootstrap/scss/variables"; $line-height-base: 1.4; → 变量已定,改了白改
  • 正确顺序:先 @import "bootstrap/scss/functions";,再重定义 $line-height-base,最后 @import "bootstrap/scss/variables";
  • 若你用的是预编译 CSS(如直接引入 bootstrap.min.css),这个变量完全无效,只能 CSS 覆盖
  • 注意:该变量只影响基础排版类(如 p、.lead),.btn、.alert 等组件是硬编码 line-height 的,不响应此变量

用 CSS 覆盖时要防被组件选择器干掉

直接写 body { line-height: 1.4; } 很可能没效果,因为 Bootstrap 的 reboot.scss 给 p、h1–h6 单独设了 line-height,而且选择器更具体。

VPS Bootstrap
VPS Bootstrap

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

下载
  • 优先覆盖具体元素:p { line-height: 1.4; }、h2 { line-height: 1.3; }
  • 提高 specificity 更稳妥:html body p { line-height: 1.4; } 或 :root p { line-height: 1.4; }
  • 慎用 !important,但小项目快速修复可接受:p { line-height: 1.4 !important; }
  • 别忘了检查浏览器开发者工具的 Computed 面板,确认最终生效的 line-height 值和它的来源

调整 line-height 后按钮/输入框容易“文字贴顶”

Bootstrap 的 .btn 和 .form-control 高度严重依赖 line-height + padding + font-size 三者组合。单改 line-height 会打破原有垂直节奏。

  • .btn 高度 ≈ font-size × line-height + padding-top + padding-bottom;调小 line-height 后,文字会上浮,建议同步微调 padding-top 补偿
  • .form-control 若设置了固定 height(如 height: calc(1.5em + 0.75rem + 2px)),改 line-height 后文字会偏上;应移除 height,改用 min-height 或让其自适应
  • 所有涉及垂直对齐的组件(如 .input-group、.btn-group)都需连带检查,否则视觉错位会很突兀

响应式行高必须用无单位数值,别碰 em 或 rem

Bootstrap 默认用无单位数字(如 1.5)设 line-height,这是最安全的做法。一旦换成 em 或 rem,就会触发继承链计算,极易失控。

  • line-height: 1.5em 在子元素 font-size: 12px 时,实际行高 = 父元素字号 × 1.5,不是子字号 × 1.5 → 结果不可预测
  • line-height: 1.5rem 是固定像素值(如 24px),和字体大小脱钩,缩放时失衡
  • 所有响应式场景下,坚持用无单位值:line-height: 1.4,它始终是当前 font-size 的倍数
  • 如果真要用媒体查询微调,也保持无单位:@media (min-width: 768px) { p { line-height: 1.45; } }

最易被忽略的一点:行高调得太小(比如大标题配 line-height: 1)时,“g”“y”“p”这些带降部的字母会被裁掉——不是字体问题,是容器高度不够。检查 computed line-height / font-size 比值,正文建议落在 1.4–1.6,标题可略低但别低于 1.2。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
bootstrap框架介绍
bootstrap框架介绍

本专题整合了bootstrap框架相关介绍,阅读专题下面的文章了解更多详细内容。

725

2026.03.18

bootstrap安装教程
bootstrap安装教程

本专题整合了bootstrap安装相关教程,阅读专题下面的文章了解更多详细操作教程。

199

2026.03.18

css3教程
css3教程

php中文网为大家提供css3教程合集,CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。php中文网还为大家带来css3的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

1980

2023.06.14

有哪些css3渐变属性
有哪些css3渐变属性

css3中渐变属性有linear-gradient、radial-gradient、conic-gradient、repeating-linear-gradient、repeating-radial-gradient等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2966

2023.11.01

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

0

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

0

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

0

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

0

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap5 入门教程
Bootstrap5 入门教程

共0课时 | 0人学习

Bootstrap Components 组件文档
Bootstrap Components 组件文档

共0课时 | 0人学习

Bootstrap Grid 栅格系统
Bootstrap Grid 栅格系统

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn