Bootstrap 5 中 text-start、text-center、text-end 分别实现逻辑起点、居中、逻辑终点对齐，自动适配 LTR/RTL；支持响应式前缀（如 text-md-center），后声明类覆盖前序，且需避免 flex 干扰或内联样式覆盖。
text-start、text-center、text-end 在 Bootstrap 5 中怎么用
Bootstrap 5 废弃了 text-left 和 text-right，统一改用 text-start 和 text-end，这是响应式对齐的基础——它会根据当前断点的文本方向（LTR/RTL）自动适配，而不是死绑左右。如果你在旧项目里看到 text-left 不生效，大概率是升级到 v5 后没更新类名。
实际用法很简单：
-
text-start：默认左对齐（LTR 下等价于左，RTL 下等价于右） -
text-center：居中，无方向依赖 -
text-end：默认右对齐（LTR 下是右，RTL 下是左）
它们支持响应式前缀，比如 text-sm-start、text-md-center、text-lg-end，表示“在 sm 及以上”“md 及以上”生效——注意不是“仅在该断点”，而是“≥该断点”。
为什么加了 text-center 没效果？常见原因
最常踩的坑不是类写错，而是父容器或 CSS 干扰了对齐行为：
- 父元素设置了
display: flex，此时子元素的text-align失效，得用justify-content控制 - 文本被包在
<div> 里但没设 <code>width，而父容器是 inline 或未定义宽度，导致“居中”无参照 - 用了
text-center但目标是按钮或链接，而它们默认是 inline 元素，需配合d-block或mx-auto才能真正水平居中 - 自定义 CSS 里写了
text-align: left !important，直接覆盖了 Bootstrap 类
快速验证：打开浏览器开发者工具，检查元素 computed 样式里的 text-align 是否被覆盖或继承异常。
响应式对齐怎么组合写才不冲突
响应式类可以叠加，顺序很重要——后面声明的会覆盖前面的（CSS 层叠规则）。例如：
<p class="text-start text-md-center text-lg-end">小屏左，中屏居中，大屏右</p>
这行代码实际生效逻辑是：
- xs（text-start 生效
- sm（≥576px）：
text-start+text-md-center→text-md-center覆盖，居中 - lg（≥992px）：三个都匹配，
text-lg-end最后声明，最终右对齐
别写成 text-lg-end text-md-center text-start，否则 lg 断点下也会被 text-start 覆盖——Bootstrap 的响应式类没有“断点隔离”，全靠声明顺序和 CSS 优先级。
text-nowrap 和 text-truncate 配合对齐类要注意什么
这两个类会影响布局流，和对齐类一起用时容易出意料结果：
-
text-nowrap禁止换行，如果容器窄而文本长，可能导致文字溢出容器右侧，此时text-end看起来像“贴右边缘”，实则是整段文字被截断在视口外 -
text-truncate必须配合overflow: hidden和width（或max-width）才生效；如果父容器没设宽，text-center会试图居中整个超长字符串，但text-truncate把它砍成一行加省略号，视觉上可能偏左 - 想让带省略号的文本居中？得确保父容器有明确宽度，并用
text-center+text-truncate，不能只靠后者
真正要小心的是：对齐类操作的是“文本块”的对齐方式，不是单个字符的位置；一旦文本被截断、强制不换行或受 flex 影响，它的“块”边界就变了。
