行高应使用 clamp() 实现响应式切换，如 line-height: clamp(1.1, 2.8vw, 1.5)；字间距需通过媒体查询定义 letter-spacing 响应规则；对齐方式须按移动优先原则逐级覆盖，如 class="text-start text-md-center text-lg-end"。
行高怎么按断点响应式切换
Bootstrap 的 lh-sm、lh-base、lh-lg 是固定值，不带断点前缀，没法直接写 lh-md 或 lh-xl。想让小屏紧凑、大屏舒展，必须绕过工具类，用 CSS 原生能力。
推荐用 clamp()：line-height: clamp(1.1, 2.8vw, 1.5); —— 小屏取 1.1，大屏趋近 1.5，中间随视口宽度平滑过渡。注意：不能混用单位，比如 clamp(1rem, 2vw, 1.6rem) 会失效，必须统一为无单位数值或纯 vw。
- 别依赖
lh-*类叠加断点，class="lh-sm d-lg-block"不会“在 lg 下恢复默认”，它只控制显隐，不改样式 - 避免用
em行高，嵌套深了容易放大失真；px行高（如line-height: 24px）完全不响应，小屏下文字挤成一团 - 若需兼容 IE，退回到媒体查询 + 根字号方案：在
@media (max-width: 576px)中调小html { font-size }，再用rem写行高
字间距怎么实现断点差异化
Bootstrap 官方没提供 ls-sm、letter-spacing-lg 这类工具类，text-spacing 根本不是合法 CSS 属性，写了也无效。真正起作用的是 letter-spacing，必须自己定义响应式规则。
最稳妥的方式是写媒体查询：
@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; }
}
然后在 HTML 中用 class="resp-ls"。如果用 SCSS 编译环境，可循环生成断点类，但 CDN 用户只能靠 <style></style> 或外链 CSS。
- 别用内联
style="letter-spacing: -0.05em"——它没法响应变化，一写就锁死 - 小屏设过紧（如
-0.03em）易导致文字糊在一起；大屏过宽（如+0.1em）会让词间空隙过大，影响阅读节奏 - 不要试图用
text-center或text-start“凑”字间距效果——它们和letter-spacing毫无关系
对齐方式如何按断点逐级覆盖
想做到“小屏左对齐、中屏居中、大屏右对齐”，不能只写 text-center text-lg-end——text-center 等价于 text-xs-center，会作用于所有尺寸，后面类根本覆盖不了。
正确写法是移动优先，从最小断点开始显式声明，并按升序叠加：
class="text-start text-md-center text-lg-end"
-
text-start：xs 尺寸（ -
text-md-center：≥768px（md 及以上）居中，覆盖前面的text-start -
text-lg-end：≥992px（lg 及以上）右对齐，再覆盖前一个 - 断点顺序必须是
sm → md → lg → xl → xxl，跳过某一级（比如只写text-md-center text-xl-end），中间断点会继承上一级值，不是“无效果”
如果父容器用了 d-flex 或 justify-content-*，text-* 类基本失效——Flex 子项的对齐由父容器控制，不是靠自身 text-align。
三者协同时最容易忽略的坑
当行高、字间距、对齐要一起响应变化，用一堆 utility 类拼凑（比如 lh-sm text-md-center resp-ls）很快会失控：类名越来越长，逻辑难追溯，某处微调可能牵动全局。
真正需要精细控制时，建议放弃 utility 类组合，直接用自定义 CSS 类封装整套响应逻辑：
.hero-title {
font-size: clamp(1.25rem, 4vw, 2rem);
line-height: clamp(1.1, 2.8vw, 1.4);
letter-spacing: clamp(-0.03em, 0.01vw, 0.02em);
}
@media (max-width: 575.98px) {
.hero-title { text-align: left; }
}
@media (min-width: 768px) {
.hero-title { text-align: center; }
}
这样既清晰又可控，还能避免 Bootstrap 工具类之间隐式冲突。复杂排版场景下，utility class 是起点，不是终点。
