Bootstrap 5+ 使用 text-{breakpoint}-{align} 类实现响应式文本对齐，需用 start/end 替代 left/right；正确写法如 text-start text-sm-center text-lg-end，从最小断点逐级覆盖；Flex 容器内 text- 可能失效，应优先用 justify-content- 控制。
如何用 Bootstrap 的响应式文本对齐类控制不同断点下的对齐方式
bootstrap 提供了一套完整的响应式文本对齐工具类，不需要写自定义 css 就能实现「小屏左对齐、中屏居中、大屏右对齐」这类需求。关键在于理解类名命名规则和断点映射关系。
所有文本对齐类都遵循 text-{breakpoint}-{align} 格式，其中 {breakpoint} 是断点前缀（如 sm、md），{align} 是对齐值（start、center、end）。注意：Bootstrap 5+ 已弃用 left/right，统一用逻辑值 start/end（适配 RTL）。
-
text-start等效于传统左对齐（LTR 下），且无断点前缀 → 作用于所有断点 - 加前缀如
text-md-center表示「从md断点开始生效，并向上覆盖更高断点」 - 要实现「不同断点不同对齐」，必须显式写出多个类，让它们按断点优先级叠加
常见组合写法与断点生效逻辑
比如想实现：xs 左对齐、sm 居中、lg 右对齐。不能只写 text-sm-center text-lg-end，因为 text-sm-center 在 lg 断点下依然有效（断点类是“最小宽度生效”，且高断点类不会自动覆盖低断点类）。
正确做法是「从最小断点开始逐级覆盖」，利用 Bootstrap 的断点层级设计：
-
text-start→ xs（默认，无前缀） -
text-sm-center→ 从 sm 开始居中（覆盖 xs 的 start） -
text-lg-end→ 从 lg 开始右对齐（覆盖 sm 的 center）
完整 class 示例：class="text-start text-sm-center text-lg-end"。渲染时浏览器会按断点匹配并应用最后一个满足条件的类。
为什么 text-md-right 不生效？
这是 Bootstrap 5 升级后最常踩的坑：旧文档或代码片段里的 text-md-right 在 Bootstrap 5+ 中已不存在。它被 text-md-end 替代。
- 错误写法：
text-md-right→ 浏览器完全忽略，回退到上一个有效类（可能是text-start） - 正确写法：
text-md-end→ 在md及以上断点右对齐 - 同理：
text-right应改为text-end；text-left改为text-start - 如果项目还在用 Bootstrap 4，保留
right/left没问题；但 5.x 必须切换
配合 Flex 布局时的对齐冲突
如果文字容器本身用了 d-flex 或 justify-content-* 类，text-* 对齐可能失效——因为 Flex 子元素的文本对齐由父容器的 justify-content 控制，而非自身 text-align。
- 纯块级元素（如
<p></p>、<div>）用 <code>text-*有效 - Flex 容器内的直接子元素，优先用
justify-content-*（父级）或ms-auto/me-auto（子级）控制位置 - 若坚持用
text-*，需确保该元素不是 Flex 子项，或额外加align-self-start等避免继承干扰
复杂布局里，文本对齐只是表层效果，真正起作用的往往是盒模型层级和 display 类型。别只盯着 text-* 类猛加。
