bootstrap不支持text-align-lg-start等直接响应式类，需用覆盖策略：先设text-center（小屏居中），再加text-lg-justify实现大屏两端对齐；flex容器内text-align失效，应改用justify-content等布局类。
text-align 在不同断点下的响应式控制
Bootstrap 本身不提供直接的 text-align-lg-start text-align-md-center 这类组合类（旧版 v4 有类似写法，但 v5+ 已移除），所以不能靠单个 class 同时实现“大屏左对齐、小屏居中”这种反向逻辑——你得用断点覆盖策略，而不是叠加。
核心思路是：先设小屏样式（默认生效），再用更大断点的类覆盖它。Bootstrap 的断点顺序是 xs → sm → md → lg → xl → xxl，类名越往后优先级越高（前提是它们作用于同一元素且无 !important 干扰）。
-
text-center对应xs及以上所有尺寸（默认生效） - 加
text-lg-start或text-lg-end覆盖lg及以上尺寸 - 若需“大屏两端对齐”，必须用
text-lg-justify（不是start/end）
text-lg-justify 是唯一能实现两端对齐的响应式类
text-justify 在 Bootstrap 中只在 lg 及以上断点提供响应式变体，比如 text-lg-justify。它依赖浏览器原生的 text-align: justify 行为，效果受行宽、单词长度和空格分布影响——短行或单个长单词可能无法真正撑满，这不是 Bug，是 CSS 本身限制。
常见误操作：text-lg-start 只是左对齐，text-lg-end 是右对齐，二者都不等于“两端对齐”。别指望用两个 class 拼出 justify 效果。
- 两端对齐仅在段落文本（多行、含空格）中可靠；标题或单行短文本基本无效
-
text-lg-justify不会改变sm/md下的对齐方式，前提是没额外覆盖 - 若用了
text-md-center，它会覆盖text-center，但会被text-lg-justify再次覆盖 —— 断点链要理清
实际写法与易错点
正确写法（小屏居中，大屏两端对齐）：
<p class="text-center text-lg-justify">这是一段需要响应式对齐的文字</p>
错误写法举例：
-
class="text-center text-lg-start"→ 大屏变成左对齐，不是两端 -
class="text-lg-justify text-center"→ 类顺序不影响优先级，Bootstrap 的 CSS 是按断点媒体查询写的，lg规则后声明，会覆盖xs的text-center - 漏掉
text-center，只写text-lg-justify→ 小屏回退到浏览器默认（通常是左对齐），不是居中
如果项目用了自定义断点（比如改了 $grid-breakpoints），lg 对应的实际像素值可能变化，务必确认你的 lg 断点起始宽度是否符合预期（默认是 992px）。
Flex 布局下 text-align 不生效怎么办
如果你把文字包在 div class="d-flex" 里，text-align 类会失效——因为 flex 容器中对齐由 justify-content 和 align-items 控制，不是 text-align。
- 想让 flex 子项文字居中？给子元素加
text-center，或给父容器加justify-content-center - flex 容器内无法用
text-lg-justify实现两端对齐；真要两端对齐，得用text-align: justify+ 非 flex 布局，或改用 CSS Grid 的justify-content: space-between（但那是元素级分布，不是文字级） - 最稳妥做法：避免在 flex 容器里依赖
text-align响应式类，先判断布局层级是否合理
两端对齐这事，浏览器渲染细节多，小屏居中容易，大屏 justify 却常因内容太短或字体渲染差异显得“不够满”——这不是代码写错了，是排版本身的边界情况。
