Bootstrap响应式文本类需按断点升序书写，从最小断点开始显式覆盖；text-start（xs）、text-md-center（md）、text-lg-end（lg）依次生效，跳过断点则继承前一设置。
text-start text-md-center text-lg-end 这类组合怎么写才生效
必须按断点升序写，且从最小断点开始显式覆盖。Bootstrap 的响应式文本类不是“区间控制”，而是“最小宽度生效 + CSS 层叠覆盖”。text-start作用于 xs（≥0px），text-md-center从 md（≥768px）起生效并覆盖前面的设置，text-lg-end再从 lg（≥992px）起覆盖前两者。
常见错误写法：text-center text-lg-end——text-center等价于text-xs-center，会锁死所有尺寸，text-lg-end完全无效；text-lg-end text-md-center——顺序颠倒，但因 Bootstrap 是按媒体查询声明顺序实现的，后写的类优先级更高，实际仍可能生效，但逻辑混乱、难维护，不推荐。
-
text-start：xs 尺寸左对齐（浏览器默认值，但显式写出可确保可控） -
text-sm-center：≥576px 居中（覆盖 xs） -
text-lg-end：≥992px 右对齐（覆盖 sm/md） - 跳过某个断点（如只写
text-sm-center text-xl-end），则 md/lg 会继承 sm 的居中效果
为什么 text-md-right 总是不生效
Bootstrap 5+ 已彻底移除 text-md-right、text-left、text-right 这类基于方向的类名，统一改用逻辑值 start/end 适配 RTL（从右向左）语言。写了 text-md-right，CSS 文件里根本没这条规则，浏览器直接忽略，回退到上一个有效类（比如 text-start 或默认左对齐）。
- 正确写法：
text-md-end（大屏右对齐）、text-end（全尺寸右对齐） - 旧项目升级时，全局搜索替换：
text-right → text-end，text-left → text-start - Bootstrap 4 仍支持
right/left，但混用会导致样式不可预测，建议一次性切完
Flex 容器里 text-* 类为啥完全没反应
因为 text-align 只对块级流内元素起作用，而 d-flex 子项已脱离文本流。父容器加了 d-flex 或 justify-content-center，子元素上的 text-center 就会被无视——它连渲染机会都没有。
- 检查父级是否含
d-flex、justify-content-*、align-items-* - 想让 Flex 子项文字居中：用
justify-content-center（主轴）或align-items-center（交叉轴） - 想保留
text-*行为：要么删掉父级d-flex，要么把文字提到 Flex 外层独立<div> - 别用
style="text-align: center"强行覆盖——它会压倒所有响应式类，导致断点切换失效
同一段落里能不能部分左对齐、部分居中
不能。text-start、text-center 这些类作用于整个块级元素（<p>、<div>），内部所有文字统一受控。给 <span> 单独加 text-center 没用，text-align 不继承，也不支持局部覆盖。
- 可行方案：拆成多个块级容器，各自加对齐类，例如
<div class="text-start">Label</div><div class="text-center">Value</div> - 更紧凑方案：用
d-flex justify-content-between控制左右锚点，中间元素加flex-grow-1再套text-center - 表格单元格（
<td>）需单独加text-end等类，不会继承父级text-* - 中文场景慎用
text-justify：它依赖单词间空格断行，中文几乎无两端对齐效果
真正要协同控制对齐、行高、字间距三者响应变化时，Bootstrap 工具类很快会变得冗长难维护。这时候该考虑用 CSS 自定义属性配合媒体查询，而不是硬凑一堆 text-* 类。
