Bootstrap本身不提供letter-spacing工具类,其spacing类仅控制margin/padding,字符间距需手动通过CSS设置,且须注意单位适配、继承污染及与line-height协同。

Bootstrap 本身不提供 letter-spacing 工具类
Bootstrap 的 spacing 工具类(如 mt-3、px-4)只管盒模型间距(margin / padding),**完全不管文字内部的字符间距**。letter-spacing 是纯 CSS 属性,Bootstrap 没封装对应类——你得自己写样式。
常见误操作是翻遍 Bootstrap 文档找 ls-2 或 text-spacing 这类类名,结果找不到。这不是你漏看了,是它真没做。
- 想全局微调正文?直接改
body或.text-body的letter-spacing - 想给标题加宽松感?在
h1~h6上单独设,比如h2 { letter-spacing: 0.06em; } - 用 Sass 主题定制?可在
_variables.scss里加自定义变量,再注入到组件样式中,但仍是手动控制
为什么不能直接套用 Bootstrap 的 spacing 命名逻辑
有人尝试仿照 ms-2(margin-start)自己起名,比如 ls-1 表示 letter-spacing: 0.02em。这看似合理,但实际会出问题:
- 单位冲突:
ms-2对应的是$spacer * 2(默认1rem),而letter-spacing合理值在0.02em~0.1em之间,放大 2 倍就变成0.04em,不是线性可比的尺度 - 负值敏感:Bootstrap 的
ms-n2是安全的,但ls-n2若映射成-0.04em,在小字号下可能引发汉字重叠,浏览器渲染差异大(尤其 Safari) - 继承污染:
letter-spacing具有继承性,一个ls-1类加在父容器上,所有子文本(包括input、button内文字)都会被影响,光标定位和选中体验变差
配合 Bootstrap 使用 letter-spacing 的实操建议
在 Bootstrap 项目里调 letter-spacing,核心是「按需、局部、可控」:
- 避免在
.container或.row这类布局容器上设letter-spacing——它会向下穿透,污染所有文本子元素 - 优先用语义化类名,比如
.page-title、.logo-text,而不是泛泛的.ls-tight - 中英文混排时,别对整个
.card-title统一设值;可嵌套<span class="en-only">API</span>,再单独给.en-only { letter-spacing: 0.02em; } - 移动端要降级:用媒体查询收紧间距,例如
@media (max-width: 576px) { .hero-heading { letter-spacing: 0.02em; } },防止窄屏下文字溢出
letter-spacing 和 Bootstrap 排版的协同盲区
最常被忽略的一点:Bootstrap 的 line-height 默认值(如 .lead 是 1.6)和你加的 letter-spacing 不是独立变量。加大字符间距后,如果行高没同步微调,视觉节奏会失衡——字变松了,但行距没动,反而显得单薄空洞。
更隐蔽的问题是字体加载时机:Nunito 等自定义字体若未启用 font-feature-settings: "kern",仅靠 letter-spacing 拉宽,无法修复「AV」「To」这类字偶距缺陷,用户看到的仍是机械等距,不是专业排版效果。


















