bootstrap 5中实现“小屏居中、中屏及以上两端对齐”需用text-center text-md-justify；text-md-justify仅对块级元素、多行文本生效，且受safari旧版本及内容长度限制。
用 text-start/text-end/text-center 配合响应式断点控制对齐
Bootstrap 5 的文本对齐类本身不支持“同一元素在不同屏幕尺寸下切换对齐方式”，必须组合使用断点前缀。直接写 text-center 会覆盖所有尺寸，而想实现“大屏两端对齐、小屏居中”，核心是让小屏优先级更高（因为移动端优先），再用断点类覆盖大屏行为。
-
text-center默认生效（作用于 xs 及以上） - 加上
text-md-start和text-lg-end无法实现“两端对齐”——那是左右两个元素的配合，不是单个元素的属性 - 正确做法是：小屏居中 →
text-center；中屏及以上两端对齐 →text-md-start+text-md-end不行，得用text-md-justify（注意：仅对块级元素、且内容足够长时才可见效果）
所以真正可用的是：text-center text-md-justify
text-md-justify 在什么情况下才有效
text-justify 类本质是设置 CSS 的 text-align: justify，但它有明显限制：
- 只对块级元素（如
p、div）生效，行内元素（如span）无效 - 必须有足够多的文字（通常 ≥ 2 行），否则浏览器无法计算词间距，看起来和
text-start没区别 - 不受
white-space: nowrap影响——如果父容器设了这个，text-justify直接失效 - Flex 容器里的子元素无视
text-justify，它只作用于自身文本流
示例结构：
<p class="text-center text-md-justify">这是一段足够长的文字，用来演示在中屏及以上宽度时如何实现两端对齐，而在手机上自动居中显示。</p>
为什么不用 text-md-start + text-lg-end 模拟两端对齐
这是常见误解。单个元素不能同时拥有 text-start 和 text-end 来“拉伸”文字——它们互斥，后写的类会覆盖前一个（CSS 层叠规则）。即使写成 text-start text-end，最终生效的是 text-end。
- 两端对齐 ≠ 左右各放一个元素
- 如果你真需要“标题左、副标题右”的布局，应该用
flex或grid，而不是文本对齐类 -
text-justify是唯一原生支持单元素内“首尾撑满”的方案，但依赖内容长度和换行行为
移动端居中 + 大屏两端对齐的兼容性注意点
-
text-justify 在 Safari 旧版本（iOS ≤ 14.4）中对中文段落支持不稳定，可能出现最后一行左对齐或间距异常
- 如果内容太短（比如只有 1 行 10 个字），
text-md-justify 几乎无视觉变化，此时可考虑媒体查询手动补 CSS：@media (min-width: 768px) {
.my-text { text-align: justify; }
}
- Bootstrap 5.3+ 开始，
text-justify 已移除对 text-wrap: balance 的隐式依赖，无需额外配置，但也不再自动优化断行
text-justify 在 Safari 旧版本（iOS ≤ 14.4）中对中文段落支持不稳定，可能出现最后一行左对齐或间距异常text-md-justify 几乎无视觉变化，此时可考虑媒体查询手动补 CSS：@media (min-width: 768px) {
.my-text { text-align: justify; }
}
text-justify 已移除对 text-wrap: balance 的隐式依赖，无需额外配置，但也不再自动优化断行实际项目里，如果内容长度不可控，更稳妥的做法是放弃纯 CSS 的 text-justify，改用 JavaScript 动态判断行数后添加类，或者接受小屏居中、中屏左对齐、大屏 justify 的渐进增强逻辑。对齐方式切换这件事，从来不是非黑即白的开关。
