text-center 和 text-md-end 组合能响应式切换对齐，是因为 bootstrap 5 采用移动优先原则：text-center 作用于所有尺寸（xs 起），text-md-end 从 md（≥768px）起按 css 层叠规则覆盖前者，无需媒体查询或 js。
立即进入“夸克AI手把手教你，操作像呼吸一样简单！☜☜☜☜☜点击进入”；
text-center 和 text-md-end 组合为什么能响应式切换对齐
Bootstrap 5 的响应式文本类基于移动优先原则，text-center 默认作用于 xs（≥0px），即所有尺寸；text-md-end 仅在 md（≥768px）及以上生效，并通过 CSS 源码顺序覆盖前一个类。这种覆盖不是“条件判断”，而是标准层叠：后声明的规则优先级更高。
- 不需要额外写媒体查询，也不依赖 JS
- 断点继承是单向的：一旦
text-md-end生效，它会持续影响lg、xl、xxl，无需重复写text-lg-end - 若需“仅在 md 居中、其他尺寸右对齐”，必须显式写出
text-end text-md-center text-lg-end—— Bootstrap 不提供“中间断点独占”的简写语法
别用 style="text-align: center" 覆盖响应式类
内联样式 style="text-align: center" 的优先级高于所有工具类，会直接禁用 text-sm-end 等断点类的切换能力。
- 常见误操作：在已有
text-center text-md-end的元素上，为“临时调一下”加内联样式，结果小屏大屏都居中了 - 正确做法：删掉内联样式，改用更细粒度的断点类，例如从
text-center text-md-end改成text-sm-center text-md-end - 如果真要强制覆盖（比如调试时），用
!important是下策，且会破坏后续维护性
同一段落里无法混合对齐，text-start/text-center/text-end 都是整块生效
text-center 作用于整个 <p></p> 或 <div>，不能让其中某个词左对齐、另一个居中。<ul>
<li>常见失败尝试：给 <code><p class="text-center"><span class="text-start">Label</span> Value</p> —— text-start 在这里完全无效，因为 text-align 不继承，子元素也无法局部覆盖父级设置
- 拆成多个独立块级容器，各自加对齐类
- 用
d-flex+justify-content-between/justify-content-center控制内部子项位置 - 需要“标签左、值容器级居中”时，放弃
text-*，改用绝对定位 +left: 0; right: 0; margin: auto锚定值区域
text-justify 对中文基本无效，别指望它做两端对齐
text-justify 依赖单词间空格触发拉伸，而中文排版没有自然分词间隙，浏览器几乎不会调整汉字间距。
- 在英文或带空格的拉丁文内容中可观察到效果，但中文段落加了也看不出变化
- 若真需中文两端对齐（如印刷级排版），得用
text-align: justify配合text-justify: inter-character（CSS 属性，非 Bootstrap 类），且兼容性有限（Chrome 120+、Safari 17+ 支持） - Bootstrap 本身没封装
inter-character，所以text-justify类对中文场景基本等于摆设
复杂点在于：响应式对齐不是“开关式切换”，而是 CSS 层叠的连续覆盖；而混合对齐需求一旦出现，就立刻脱离 text-* 类的能力边界——这时候该换 Flexbox，而不是堆更多类名。
