Bootstrap 5+ 文本对齐需按移动优先顺序组合类，如text-start text-sm-center text-lg-end，确保xs左对齐、sm居中、lg右对齐；断点类自上而下覆盖，顺序错误则响应失效。
Bootstrap 5+ 本身不支持「一行代码切换不同断点下的行间距（letter-spacing）」，也**不能直接用 utility 类实现断点级行高（line-height）的独立控制**；对齐模式虽有完整响应式类，但必须严格按移动优先+升序覆盖逻辑写，否则全屏表现一致。
text-* 对齐类怎么写才真正响应不同断点
关键不是“选哪个类”，而是“怎么组合+顺序”。Bootstrap 的 text-* 类靠 CSS 层叠生效，每个带断点的类只在对应断点及以上起作用，且后写的会覆盖前写的。
-
text-start：基础态，xs 尺寸（text-align: start，但一旦加了text-center，就全屏居中，无法退回去 -
text-sm-center：≥576px 时居中，覆盖text-start（如果写了） -
text-lg-end：≥992px 时右对齐，覆盖前面所有 - 必须升序写：
text-start text-sm-center text-lg-end，不能倒着或跳断点（比如漏掉md，那 768–991px 区间会继承sm的居中） - Flex 容器里
text-*基本失效——父级用了d-flex或justify-content-*，子元素已脱离文本流；改用justify-content-center或删掉d-flex
lh-* 行高类为什么不能按断点单独设值
lh-sm、lh-base、lh-lg 是固定值（分别是 1.25 / 1.5 / 2），它们**没有 lh-md、lh-xl 这类变体，也不支持断点前缀**。想让小屏紧凑、大屏宽松，得绕过 utility 类。
- 最简方案：用
lh-sm打底，再配合断点类控制显示行为，比如lh-sm d-md-block→ 小屏用紧凑行高，中屏及以上恢复默认块级渲染（依赖父容器 line-height） - 更可靠做法：自定义 CSS，例如：
@media (max-width: 575.98px) { .resp-lh { line-height: 1.2; } } @media (min-width: 768px) { .resp-lh { line-height: 1.6; } }然后在 HTML 中加class="resp-lh" - 别试图用
lh-sm text-md-center这种组合“凑”响应式行高——lh-sm不认断点，它全局生效
letter-spacing 没有内置响应式类，必须自己补
Bootstrap 官方 utility 集合里**压根没提供任何 ls-*、text-spacing-* 或带断点的字间距类**。写 text-spacing-sm 或 ls-md 浏览器直接忽略。
- 如果你用 SCSS 编译 Bootstrap，可在
_custom.scss里加循环生成类，例如：@each $breakpoint, $value in $grid-breakpoints { @include media-breakpoint-up($breakpoint) { .ls-#{$breakpoint}-tight { letter-spacing: -0.02em; } } }编译后就能用ls-sm-tight ls-lg-wide - 纯 CDN 用户，只能手写媒体查询：
@media (min-width: 768px) { .title { letter-spacing: 0.03em; } }再给元素加class="title" - 内联
style="letter-spacing: -0.05em"仅适合静态、单处使用；一加就失去响应能力，且无法复用
真正需要协同控制对齐、行高、字间距三者响应变化时，utility 类很快变得冗长难维护——text-start text-lg-center lh-sm ls-sm-tight ls-lg-wide 这种写法看似可行，实则不可读、难调试、易冲突。建议把这类复杂排版逻辑收进自定义组件或 SCSS 模块，而不是堆 class。
