text-center 一加就全屏居中是因为它等价于 text-xs-center，从 xs 断点起生效并持续至 xxl，无自动退场；需用升序断点类（如 text-start text-md-center text-lg-end）显式覆盖实现响应式对齐。
text-center 为什么一加就全屏居中？
因为 text-center 等价于 text-xs-center，它从最小断点（xs）开始生效，并且会一直作用到最大断点（xxl），中间没有任何“自动退场”机制。你写一次，它就锁死所有尺寸——这不是 bug，是 Bootstrap 的层叠设计逻辑。
想实现“小屏左、中屏中、大屏右”，不能靠删类或条件渲染，得靠显式覆盖：
-
text-start：设基础态（xs尺寸左对齐） -
text-md-center：从md（≥768px）起居中，覆盖前面的start -
text-lg-end：从lg（≥992px）起右对齐，再覆盖center
顺序必须升序（sm → md → lg → xl），否则 CSS 层叠优先级不可靠。错误写法如 text-lg-end text-md-center 会导致 md 断点仍右对齐。
Flex 容器里 text-* 类完全失效怎么办？
只要父元素带 d-flex、justify-content-center 或任何 flex 相关类，子元素的 text-center 就基本没用——text-align 只对块级流内元素生效，Flex 子项已脱离文本流。
排查和修复建议：
- 检查父级是否含
d-flex、justify-content-*、align-items-*等类 - 标题居中：去掉
.modal-header的d-flex，或改用justify-content-center - 标题左 + 关闭按钮右：保留
justify-content-between，给标题加flex-grow-1 text-start - 别用
style="text-align: center"强行覆盖——它会彻底破坏响应式切换能力
怎么让 Modal 内文字缩放时对齐不偏移？
对齐错位往往不是 text-center 没生效，而是字号没响应窗口变化，导致行高、换行、容器宽度失配。
关键组合：
- 字号用
clamp(1rem, 2.5vw, 1.5rem)，不是固定font-size: 1.5rem - 必须配
<meta name="viewport" content="width=device-width, initial-scale=1">，否则vw单位无效 -
line-height必须无单位（如line-height: 1.4），带单位（px/rem）会卡死行高 - 禁用
white-space: nowrap，尤其在按钮或标签内；长词缩放后会直接溢出
Modal 的 .modal-dialog 若设了 max-width 却没配 width: 100%，实际内容区变窄，text-center 看起来就会“偏左”——这是容器宽度问题，不是对齐类失效。
多段文字在同一行里能否不同对齐？
不能。所有 text-* 类都作用于整个块级容器（<p></p>、<div>），内部所有文字统一受控；加在 <code><span></span> 上完全无效。
可行解法只有两种：
- 拆成多个块级容器，各自加对齐类：
<div class="text-start">左边</div> <div class="text-center">中间</div> - 用定位模拟局部居中：
position: relative; left: 0; right: 0; margin: auto;，但仅限单行且需固定宽高
真正容易被忽略的是：对齐行为永远依赖容器 display 类型和层级关系，而不是单纯堆砌 class。写完先 inspect 元素，看 computed 样式里 text-align 是否真的被应用，比猜更可靠。
