<p>要让 justify-content- 按断点生效，必须使用响应式前缀（如 justify-content-md-center），且父容器需有 d-flex 或 row；混用多个断点类会覆盖，text-align- 与 justify-content-* 不可混用。</p>
怎么让 justify-content-* 按断点生效
直接写 justify-content-center 是全局生效的，要它只在某个断点起作用，必须加响应式前缀，比如 justify-content-md-center。这类类名只在对应断点及以上宽度生效（md 即 ≥768px），更小尺寸会回退到默认左对齐（justify-content-start）。
常见错误现象：写了 justify-content-lg-center，但在 iPad 竖屏（768px 宽）下没居中——因为 lg 起始于 992px，768px 属于 md 断点，此时该类未激活。
-
justify-content-sm-*：≥576px 生效（手机横屏、小平板） -
justify-content-md-*：≥768px 生效（平板竖屏及以上） -
justify-content-lg-*：≥992px 生效（桌面小屏） - 不能混用多个，如
justify-content-sm-start justify-content-md-center—— 后者会覆盖前者，且无“sm 生效、md 失效”的逻辑 - 父容器必须有
d-flex或row（二者都提供display: flex），否则类名无效
为什么加了 justify-content-end 但按钮还是靠左
最常被忽略的前提是：父容器没启用 Flex 布局。Bootstrap 的 justify-content-* 类只在 Flex 容器内起作用。如果只是给一个普通 <div> 加 justify-content-end，浏览器完全无视——它不是通用 CSS 属性，而是 Bootstrap 基于 Flex 的工具类。
典型失效场景：
- 把
justify-content-end加在<div class="container">上，但没加d-flex→ 无效 - 用
<div class="row">包着按钮，但按钮没放在col里，而是直接子元素 → 可能因row自带margin和flex-wrap导致视觉偏移 - 按钮本身用了
float或position: absolute→ 脱离文档流，Flex 对齐失效
安全写法：<div class="d-flex justify-content-end"><button>提交</button></div>
order-* 和 justify-content-* 混用时的顺序陷阱
order 控制的是子元素在主轴上的绘制顺序，justify-content 控制的是它们整体在主轴上的分布位置。两者不冲突，但容易误判效果。
例如：<div class="d-flex justify-content-between"><div class="order-2">B</div><div class="order-1">A</div></div> —— 视觉上是 A 在左、B 在右（因 justify-content-between 把首尾元素撑开），但 DOM 顺序仍是 A、B；而 order 让渲染顺序变成 B、A，再经 justify-content-between 分配后，B 被推到最左，A 到最右，结果和没写 order 一样。
- 想让“B 在左、A 在右”，又不想改 HTML，用
justify-content-end+order-1更直观 -
order只在同一 Flex 容器内有效，跨row或嵌套col无法调度 -
order不影响可访问性，屏幕阅读器仍按源码顺序读取，这点必须手动用tabindex或 JS 补齐
text-align-* 和 justify-content-* 别用混
text-align-center 是文本对齐，作用于行内内容；justify-content-center 是 Flex 对齐，作用于块级子元素。二者语义和适用层级完全不同。
典型误用：想让一个按钮在卡片里水平居中，却给卡片加 text-align-center —— 这只对按钮内的文字有效，按钮本身仍是块级、左贴边；正确做法是给卡片加 d-flex justify-content-center。
- 纯文本居中：
text-center或text-md-center - 子元素（按钮、图片、表单控件）居中：
d-flex justify-content-center - 响应式混合：需要移动端左对齐、桌面端居中？写
text-start text-md-center，别用 Flex 工具类去模拟文本对齐
真正复杂的地方在于：当父容器既是 Flex 容器又有文本内容时，text-align 和 justify-content 会同时作用，但影响对象不同——前者管文字基线，后者管子元素盒模型，稍不注意就出现“文字居中了、图标偏了”这种错位。
