Bootstrap文字响应式对齐需按“移动优先+逐级覆盖”原则：先写text-start（xs左对齐），再text-md-center（≥768px居中覆盖），最后text-lg-end（≥992px右对齐覆盖），且必须用start/end替代已废弃的left/right。
直接用 text-* 响应式类能搞定对齐切换，但间距（letter-spacing）必须自己写 CSS；别指望 text-spacing 这种不存在的类生效。
怎么写断点对齐才不会全屏一样？
Bootstrap 的文本对齐类是“最小宽度生效 + 后写覆盖前写”，不是“区间隔离”。text-center 等价于 text-xs-center，一加就全屏居中，没法退回去。
- 正确写法：从最小断点开始显式声明，比如
text-start text-md-center text-lg-end -
text-start→ xs 尺寸左对齐（浏览器默认值，但显式写出更可控） -
text-md-center→ ≥768px 居中，覆盖前面的text-start -
text-lg-end→ ≥992px 右对齐，再覆盖text-md-center - 漏掉
text-start时，xs 尺寸会走浏览器默认，但一旦加了text-center，就锁死全部尺寸
为什么 text-md-right 不起作用？
Bootstrap 5+ 已彻底移除 text-left/text-right，统一改用逻辑值 start/end 适配 RTL。旧类名被忽略，CSS 规则压根没定义。
- 错误：
text-md-right、text-right→ 浏览器当无效类处理，回退到上一个有效类（可能是text-start或默认） - 正确：
text-md-end、text-end - 项目若还在用 Bootstrap 4，可保留
right/left；升级到 5.x 后必须全局替换
行高和字间距没法靠内置类响应式切换
lh-sm/lh-base/lh-lg 是固定值，且没有 lh-md 或 lh-xl；letter-spacing 则完全没提供任何工具类。
- 行高响应式方案：用基础类打底（如
lh-sm），再配合媒体查询覆盖，例如：@media (min-width: 768px) { .my-text { line-height: 1.6; } } - 字间距响应式方案：必须自定义类，比如在
<style>中写：@media (max-width: 575.98px) { .ls-tight { letter-spacing: -0.02em; } }@media (min-width: 576px) { .ls-normal { letter-spacing: 0; } }，然后用class="ls-tight ls-normal" - 别用内联
style="letter-spacing: ..."—— 它无法响应断点变化
Flex 容器里 text-* 类为啥失效？
如果父元素用了 d-flex 或 justify-content-*，子元素已脱离文本流，text-align 失去作用对象。
- 检查父级是否含
d-flex、justify-content-center等类 - 想控制 Flex 子项文字对齐，该用
justify-content-*（主轴）或align-items-*（交叉轴） - 强行在子元素加
text-center没用；用style="text-align:center"会破坏所有响应式切换逻辑 - 表格单元格（
<td>）也不继承父级text-*，得单独加类，比如<td class="text-end">
最易被忽略的是：断点类之间没有“自动清空”机制，text-md-center 会一直生效到 xxl，除非你用更大的断点类去打断它；而字间距这种纯 CSS 属性，Bootstrap 根本没封装，硬套工具类名只会白忙活。
