text-center等价于text-xs-center，会作用于所有断点且无法被更小断点类覆盖；正确做法是移动优先，先设基础态（如text-start），再用更大断点类（如text-lg-center）逐级覆盖。
直接用响应式文本类组合，比如 text-start text-lg-center 表示小屏左对齐、大屏居中；写错断点顺序或漏掉基础类，文字就会在所有尺寸下表现一致。
为什么 text-center 一加就全屏居中？
因为 text-center 等价于 text-xs-center，它会作用于所有尺寸，且无法被更小断点的类覆盖。一旦写了它，除非显式用更大断点（如 text-md-end）去覆盖，否则不会“自动退回到左对齐”。
- 错误写法：
text-center text-md-start——text-center已经锁死全部尺寸，text-md-start不生效 - 正确逻辑：从移动优先出发，先设小屏行为（如
text-start），再用更大断点类覆盖（如text-lg-center） - 断点必须按升序写，CSS 层叠才可靠：小屏类在前，大屏类在后，例如
text-sm-end text-xl-start
text-sm-start text-md-center text-lg-end 这种写法真能逐级切换？
能，但得理解断点含义和生效条件。Bootstrap 的响应式文本类基于媒体查询，每个类只在对应断点及以上生效，且后写的会覆盖前写的。
-
text-sm-start：≥576px 时左对齐（含 sm、md、lg、xl、xxl） -
text-md-center：≥768px 时居中 → 覆盖了 sm 断点的设置，所以 md 及以上居中 -
text-lg-end：≥992px 时右对齐 → 覆盖前两个，最终 lg/xxl 右对齐，sm/md 居中，xs（text-start（因没写 xs 类） - 注意：没写
text-xs-*时，xs 尺寸走浏览器默认text-align: start，不是继承前面的类
卡片头部、模态框主体这些特殊容器为啥加了不生效？
常见原因是父级用了 d-flex 或内部结构干扰了 text-align 的作用域。text-* 类只对块级非 flex 容器内的行内内容有效，一旦容器是 flex，它就失效。
-
.card-header默认不是 flex，加text-center有效；但如果它被包在d-flex里，就得改用justify-content-center -
.modal-body同理：若外层有d-flex，或内部嵌了form且 form 有重置样式，text-center可能被忽略 - 快速验证：给目标元素加
style="border:1px solid red"，看边框是否包裹文字——不包裹说明它被 flex 布局撑开，text-align 失效 - 表格单元格（
<td>）不继承父级 text-* 类，必须单独加，例如 <code><td class="text-end"> <h3>同一段落里想让几个词不同对齐，能用 text-* 解决吗？</h3> <p>不能。<code>text-start/text-center这些类作用于整个块级元素（如<p></p>），无法让其中某几个字左、几个居中、几个右。这是 CSS 层级限制，不是 Bootstrap 漏功能。- 强行在
<p class="text-center"></p>里用style="float:left"会破坏流式布局，响应式难控，不推荐 - 真正可行的是换结构：用
d-flex justify-content-between或justify-content-around拆成多个独立子元素 - 例如邮箱展示：
<div class="d-flex justify-content-between"> <strong>Email</strong><span>user@example.com</span> </div>，再配合flex-grow-1控制中间项占位 - 别在外层 flex 容器上同时加
text-center，它会干扰子项的对齐意图
最常被忽略的是断点命名规则和 flex 干扰：断点名必须紧贴
text-后面（text-md-center对，text-center-md错），而任何带d-flex的父容器都会让text-*类失效——这时候该切到 flex 布局思维，而不是硬调对齐类。 - 强行在
