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