父容器未加 d-flex 是 justify-content-* 失效的最常见原因；该类仅设置 css 属性，不改变 display 类型，必须配合 flex 容器（如 .row 或添加 d-flex 的元素）才生效。
父容器没加 d-flex 是最常见硬伤
Bootstrap 的 justify-content-* 类只是设置 CSS 的 justify-content 属性，它本身**不改变 display 类型**。哪怕你写了 justify-content-center，如果父容器仍是 display: block（比如默认的 .container、<div>、<code><nav></nav>），浏览器就当它不存在。
典型翻车现场：
-
<div class="container justify-content-center"><div class="row"></div></div>——.container是block，类被静默忽略 -
<ul class="pagination justify-content-center"></ul>写在了外层<nav></nav>上，而非<ul></ul>自身 - 用 Tailwind 或自定义 CSS 时拼错类名，比如写成
justify-center（Bootstrap 没这个类）
justify-content-between 看起来没推到两边？先看有没有剩余空间
justify-content-between 不是“强制贴边”，而是把**主轴上剩余空间均分到项目之间**。如果子项总宽度 ≥ 容器宽度，就没空间可分，所有值都退化为 flex-start。
常见挤压场景：
- 子项用了
flex-shrink: 0或w-100，内容撑满，不释放空间 - 子项有
border或padding，但没设box-sizing: border-box，导致实际宽度超限 - 父容器带左右
padding（比如.container默认有1.5rem），justify-content-between对齐的是 content box 边界，不是视觉边缘
子元素自己“跳出了 Flex 流程”
哪怕父容器是标准 display: flex，只要子项主动脱离布局流，justify-content 就完全失效。
这些写法会让子项失联：
-
position: absolute或position: fixed—— 元素脱离文档流，Flex 容器视其不存在 -
margin: auto（尤其是左右同时设）—— 它会直接接管主轴对齐，覆盖justify-content -
float: left/float: right—— Flex 子项不支持浮动，行为不可预测 - 子项设了
flex: 1—— 它会贪婪占满可用空间，挤掉其他子项的分配余地
响应式断点或 flex-wrap 导致行为突变
justify-content 在 flex-wrap: wrap 下是**按行独立计算**的。最后一行只剩一个子项时，它默认左对齐 —— 这不是 bug，是规范行为。
响应式下容易踩坑：
- 写了
justify-content-lg-between，但小屏下只显示一个导航项，结果它死死贴左 - 没配中间断点，比如只写
justify-content-sm-center justify-content-xl-end，那md和lg断点会回退到默认的flex-start -
.row里子项用了col-12，单列下justify-content-between失效（因为“之间”不存在）
真正卡住人的地方，往往不是语法写错，而是没意识到：谁才是 Flex 容器、谁才算它的直接子项、以及“对齐”这件事到底依赖多少前提条件。
