text-start 和 text-end 是 bootstrap 5 中替代 text-left/text-right 的逻辑对齐类，适配 ltr/rtl 双向文本：text-end 始终指向阅读方向末尾（中文右、阿拉伯语左），而 text-left 等物理方向类已弃用；响应式需组合断点类（如 text-center text-md-end），后声明者覆盖前序，且必须显式定义基础态。
text-start 和 text-end 是什么，为什么不用 text-left/text-right
Bootstrap 5 彻底弃用了 text-left 和 text-right，改用 text-start 和 text-end。这不是为了“换名字”，而是为了让同一套 class 在 LTR（如中文、英文）和 RTL（如阿拉伯语、希伯来语）页面中语义一致：text-end 永远贴在阅读方向的末尾——LTR 下是右，RTL 下自动变成左。
如果你还在用 text-right，它不会报错，但会失效：在 dir="rtl" 页面里仍向右对齐，文字被挤到屏幕右侧，违背用户阅读习惯。
- 旧写法
class="text-right"→ 固定物理右，不随语言方向变化 - 新写法
class="text-end"→ 逻辑“行尾”，自动适配 LTR/RTL - 所有断点类（如
text-md-end）也遵循该规则，无需额外写 RTL 专用类
如何实现响应式文本对齐切换
响应式对齐靠组合断点类实现，核心是“后声明的类覆盖前一个”，CSS 源码顺序决定优先级。
例如：class="text-center text-md-end" 表示：默认居中，≥768px（md）时右对齐（即行尾）。
- 想仅在 md 屏居中、其他尺寸都右对齐？必须显式写全：
text-end text-md-center text-lg-end text-xl-end - 不能只写
text-md-center—— 它没有基础态，小屏下会回退到浏览器默认（通常是左对齐） - 断点类名中的
sm/md/lg对应最小宽度，不是“区间”；text-sm-center表示 ≥576px 就居中，一直生效到更大断点被覆盖为止
常见误用：试图在同一个元素内混合对齐
text-start、text-center 这类工具类作用于整块容器（如 <p></p> 或 <div>），设置的是 <code>text-align CSS 属性，无法让同一段落里的不同词分别左/中/右对齐。
比如你给一个 <p class="text-center"></p> 加了居中，再给里面某个 <span></span> 加 style="float:right" 或 class="text-end"，不会生效——text-align 不继承、不叠加，子元素无法局部覆盖父级对齐行为。
- 真要混合对齐（如标签左、数值居中、单位右），得用 flex：
class="d-flex justify-content-between"拆成多个子元素 - 或用
d-flex justify-content-center align-items-center+flex-grow-1配合text-center控制内部内容 - 别用
style="text-align: center"写内联样式——它会直接覆盖所有响应式文本类，断点失效
card-header 等组件内怎么改文字对齐
Bootstrap 5 的 .card-header 默认带 text-start，所以天然左对齐。改对齐方式最稳妥的做法就是直接加对应工具类，不要重写 CSS 或塞内联样式。
- 居中：
<div class="card-header text-center">标题</div> - 右对齐：
<div class="card-header text-end">标题</div> - 响应式（小屏左、大屏居中）：
<div class="card-header text-start text-lg-center">标题</div> - 注意：如果父容器有
dir="rtl"，text-end会自动表现为左对齐，无需额外处理
复杂点在于，很多人会忽略断点类的覆盖逻辑——比如写了 text-center text-md-start，本意是“md 起左对齐”，结果发现小屏没效果，其实是漏了基础态（小屏需显式写 text-start 或依赖浏览器默认）。这种细节容易被跳过，但一出问题就难定位。
