text-center等价于text-xs-center，会作用于所有断点且无法被更小断点类覆盖；正确做法是移动优先，先设基础态（如text-start），再用更大断点类（如text-lg-center）逐级覆盖。
直接写 text-center 就会让所有尺寸都居中，没法“小屏左、大屏居中”——这不是 bootstrap 不支持，而是你没按它的覆盖逻辑写。
为什么 text-center 一加就全屏居中？
text-center 等价于 text-xs-center，它从最小断点（xs，
- 错误写法：
text-center text-md-start→text-center已锁死全部尺寸，text-md-start完全不生效 - 正确思路：先设小屏行为（如
text-start），再用更大断点类逐级覆盖（如text-lg-center） - 没写任何
text-*类时，浏览器默认text-align: start，也就是左对齐
怎么写出“小屏左、中屏中、大屏右”？
关键不是“选对类”，而是“顺序+断点组合”。Bootstrap 的响应式类靠 CSS 层叠优先级生效：后写的类覆盖前写的，且每个断点类只在对应断点及以上起作用。
- 推荐写法：
text-start text-md-center text-lg-end -
text-start：xs 尺寸（ -
text-md-center：≥768px（md 及以上）居中 → 覆盖了 xs 设置 -
text-lg-end：≥992px（lg 及以上）右对齐 → 覆盖前两个 - 断点必须升序排列（sm → md → lg → xl），否则层叠不可靠
Flex 容器里 text-* 类为啥失效？
如果父元素用了 d-flex 或 justify-content-*，子元素的 text-* 类基本无效——因为 text-align 只对块级流内元素起作用，Flex 子项已脱离文本流。
- 检查父级是否含
d-flex、justify-content-center等类 - 想让 Flex 内部文字居中，改用
justify-content-center（主轴）或align-items-center（交叉轴） - 若需保留
text-*行为，要么删掉父级d-flex，要么把文字提一层到 Flex 外 - 别用
style="text-align: center"强行覆盖——它会干掉所有响应式类的切换能力
同一行里能不能部分左、部分居中？
不能。text-start、text-center 这些类作用于整个块级容器（<p>、<div>），内部所有文字统一受控。
- 失败尝试：
<p class="text-center"><span class="text-start">Label</span> Value</p>→text-start在 span 上无效 - 可行方案：拆成多个块级容器，各自加对齐类
- 或者用
d-flex+justify-content-between控制左右两端，中间值区域用margin: auto居中 - 需要“标签左、值绝对居中”的场景，放弃
text-*，改用定位：position: relative+left: 0; right: 0; margin: auto
最常被忽略的点是：没写基础类（如 text-start）时，小屏不会“自动退回到左对齐”——它只是走浏览器默认，但一旦你写了 text-center，这个默认就被彻底覆盖了；而断点类之间没有“区间隔离”，text-md-center 会一直生效到 xxl，除非你用更大的断点去打断它。
