Bootstrap 不支持同一段落内混合对齐，text-center等类作用于整块元素；需改用d-flex+justify-content-*和flex-grow-1配合text-center实现标签左对齐、值容器级居中。
Bootstrap 本身不提供“同一段落内混合对齐”的原生能力，text-center、text-start 这类工具类作用于整个元素（如 <p>），无法让其中某个词左对齐、另一个居中、第三个右对齐——这是 CSS 层级的限制，不是 Bootstrap 漏了功能。
text-start / text-center / text-end 只能整块对齐
这些类直接设置 text-align CSS 属性，影响的是块级容器内所有行内内容的基线对齐位置。常见误用是给一个 <p> 加 text-center，再试图用 <span class="text-start"> 把里面某个词拉回左边——没用，text-align 不继承也不叠加，子元素不会因此“局部覆盖”父级对齐。
实操建议：
- 需要混合对齐时，放弃单个
<p>，改用多个独立元素（如<div>或<span>）配合 Flexbox 布局 - 若必须保留在一段内，可用
float+clear（但语义差、响应式难控，不推荐） -
text-justify仅在英文或带空格的文本中有效，中文几乎无效果，别指望它“两端对齐汉字”
d-flex + justify-content-* 是真正可控的方案
当你需要“Email 标签左贴边，user@example.com 整个容器水平居中”，就得跳出 text-align 思维，用弹性布局锚定每个部分的位置。
示例结构：
<div class="d-flex justify-content-between align-items-center"> <strong class="me-2">Email</strong> <span class="flex-grow-1 text-center">user@example.com</span> </div>
关键点：
-
justify-content-between把首尾子项推到容器两端，中间留空；加flex-grow-1让中间元素吃掉全部剩余空间 -
text-center此时才生效——它作用于已占满宽度的<span>，所以值真正在容器中居中 - 避免给外层
<div>加text-center，否则<strong>也会被居中，破坏左对齐需求
响应式对齐需用断点类，不能只靠基础类
移动端要左对齐、桌面端要居中？text-sm-start text-md-center 这类组合才是正解。Bootstrap 的响应式对齐类（如 text-lg-end）会覆盖更小断点的设置，按 xs < sm < md < lg < xl < xxl 顺序生效。
注意陷阱：
-
text-center是text-xs-center的别名，一旦写了它，所有尺寸都会居中，除非显式用更大断点覆盖 - Flex 容器上的
justify-content-*也有响应式变体（如justify-content-md-between），但需确保父容器始终是d-flex - 表格单元格（
<td>）默认不继承父级text-*类，得单独加，比如<td class="text-end">
特殊场景：按钮旁文字不对齐？检查垂直对齐
按钮和旁边文字看起来“没对齐”，大概率不是水平问题，而是 vertical-align 的坑。默认 <button> 和 <span> 都是 baseline 对齐，但按钮内部文字下沉，视觉上就偏低。
解决方法：
- 统一设为
align-middle（对应vertical-align: middle） - 或者把两者都包进
d-flex align-items-center容器里，用 Flex 垂直居中替代行内对齐 - 避免混用
btn和纯<a>，它们默认line-height和padding不一致，强行对齐容易错位
真正麻烦的从来不是“怎么写类”，而是想清楚：你对齐的到底是「容器」还是「行内盒」？前者用 Flex/Grid，后者才轮到 text-* 类——这个边界划不清，后面所有样式都会反复推倒重来。
