bootstrap 5.x 不支持 text-spacing 类，因其未内置响应式字间距工具类，且 letter-spacing 才是正确 css 属性；应通过自定义 scss、媒体查询或 js 动态控制实现响应式字间距。
用 text-spacing 类无法生效？Bootstrap 本身不提供响应式字间距工具类
Bootstrap（v5.x）默认没有内置如 text-spacing-sm、text-spacing-lg 这类响应式字间距工具类。直接写 text-spacing-2 或类似命名会无效——这不是 Bootstrap 的 CSS 类，浏览器也不认识 text-spacing 这个属性名。
真正控制字间距的是 CSS 的 letter-spacing 属性，而响应式控制需要结合断点媒体查询或 Bootstrap 的响应式工具类体系来实现。
推荐做法：用 style 内联 + 媒体查询，或自定义 SCSS 变量生成响应式类
最可控、无依赖的方式是自己定义响应式 letter-spacing 规则。如果你用的是 Bootstrap 源码（SCSS 版），可在 _custom.scss 中添加：
// 自定义响应式字间距类
@each $breakpoint, $value in map-get($grid-breakpoints, 'sm') {
@include media-breakpoint-up($breakpoint) {
.letter-spacing-#{$breakpoint}-tight { letter-spacing: -0.02em; }
.letter-spacing-#{$breakpoint}-normal { letter-spacing: 0; }
.letter-spacing-#{$breakpoint}-wide { letter-spacing: 0.05em; }
}
}
编译后就能用：<p class="letter-spacing-sm-tight letter-spacing-md-normal letter-spacing-lg-wide">标题文本</p>
若只用 CDN（无编译环境），可直接在 <style></style> 标签中写：
@media (max-width: 575.98px) { .resp-ls { letter-spacing: -0.01em; } }
@media (min-width: 576px) and (max-width: 767.98px) { .resp-ls { letter-spacing: 0; } }
@media (min-width: 768px) { .resp-ls { letter-spacing: 0.03em; } }
避坑：别滥用 !important 覆盖 Bootstrap 默认行高或字体大小
字间距变化后，小屏幕下过紧可能让文字“糊在一起”，大屏过宽又导致阅读断词困难。这时容易下意识加 !important 强制覆盖，但会破坏后续维护性。更稳妥的做法是：
- 始终搭配
line-height微调，比如letter-spacing: 0.03em时配line-height: 1.4 - 避免对
h1~h6全局设响应式letter-spacing，优先用语义化类名（如hero-title）单独控制 - 注意 WebKit 浏览器对负值
letter-spacing的渲染差异，-0.03em在 Safari 上可能比 Chrome 更紧
替代方案：用 data-* + JS 动态切样式（仅需极简响应逻辑时）
如果项目已引入 jQuery 或轻量级 JS 框架，且只需在几个关键节点切换字间距（例如 banner 标题），可这样处理：
<h1 data-letter-spacing="tight|normal|wide">主标题</h1>
然后监听 resize 并根据 matchMedia 切换 class：
const title = document.querySelector('[data-letter-spacing]');
const updateSpacing = () => {
if (window.matchMedia('(max-width: 575px)').matches) {
title.className = title.className.replace(/ls-\w+/, 'ls-tight');
} else if (window.matchMedia('(min-width: 768px)').matches) {
title.className = title.className.replace(/ls-\w+/, 'ls-wide');
}
};
window.addEventListener('resize', updateSpacing);
updateSpacing();
这种方式适合已有 JS 环境且样式规则极少变动的场景，但不如纯 CSS 方案稳定和性能好。
真正要注意的是：字间距不是“越大越高级”，移动端通常应比桌面端更紧凑（尤其中文字），否则小屏上单字孤立感太强；而 Bootstrap 的默认 font-size 断点已经做了适配，letter-spacing 必须跟着它反向微调，这点很容易被忽略。
