直接结论：用 justify-content-between 必须确保父容器有 d-flex 且子元素不少于 2 个；“中间留白”是其天然行为，非额外加空隙；常见失效原因是父容器未启用 flex 布局。
直接结论：用 justify-content-between，但必须确保父容器有 d-flex，且子元素不少于 2 个；“中间留白”是它天然行为，不是额外加空隙。
为什么写了 justify-content-between 却没反应
最常见原因是父容器根本没启用 Flex 布局：justify-content-between 不会自动让容器变 flex，只在已声明 display: flex（即加了 d-flex）时才生效。浏览器看到没 d-flex 的容器，就当普通 block 处理，这个类完全被忽略。
其他典型失效场景包括：
- 子元素总宽度 ≥ 容器宽度（比如都设了
w-100或flex-grow-1），没剩余空间可分配 - 用了
flex-wrap: wrap且内容换行，第二行只剩一个子项 → 默认左对齐，看起来像失效 - 子元素是原生
button或input，某些浏览器带 UA 默认 margin，干扰视觉判断 - 目标元素不是父容器的**直接子级**（比如嵌套了两层
div，类却加在祖父上）
两个按钮一左一右，要不要用 justify-content-between
可以，但更稳的写法是左边按钮不加类、右边按钮加 ms-auto：
<div class="d-flex"> <button class="btn btn-sm">取消</button> <button class="btn btn-sm btn-primary ms-auto">确认</button> </div>
理由很实在：
-
ms-auto是margin-inline-start: auto，在 LTR 页面中就是margin-left: auto，天然把元素顶到最右 - 不依赖子元素数量——哪怕只剩一个按钮，
ms-auto依然有效；而justify-content-between在单子项时完全看不出效果 - 避免和
gap混用导致首尾贴边 + 中间多一档间隙的误判 - 响应式下更可靠：小屏宽度收窄时，
ms-auto仍能保证右侧按钮贴右边缘，不会意外换行
三个元素想视觉真正“等距”，别硬套 justify-content-between
三按钮用 justify-content-between 时，首尾贴边、中间只有两个等宽间隙，但因按钮字数/宽度不同，人眼会觉得中间项偏右——这不是 bug，是标准行为。
真要“首项前、项间、末项后”间隙完全一致，优先选：
-
justify-content-evenly（Bootstrap 5.3+ 支持）：所有间隙等宽，包括首尾到容器边缘的距离 - 旧版 Bootstrap 或需兼容 IE11？改用伪元素占位：
.container::before和.container::after设为content: ""+flex: 0 0 0，再配justify-content-between，此时 n 个真实子项 + 2 个伪元素 = n+2 项，共 n+1 份等距间隙，首尾自然留白 - 手动给每个子项加
flex: 1+text-center，强制等宽分配（适合导航项）
移动端堆叠时左右对齐逻辑会断掉
Flex 主轴方向切换后，justify-content-between 行为彻底改变：横排时控制左右，竖排时变成上下贴边，完全不符合“等距堆叠”预期。
正确做法是换思路：
- 小屏竖排等距：用
d-flex flex-column gap-3 - 桌面端切回横排：用
d-flex flex-column flex-md-row gap-3 - 别在子项上再加
mb-2——gap已经提供间距，叠加会导致翻倍 - 如果用了
navbar-collapse，ms-auto在折叠展开后会失效（主轴变 vertical），此时应配合@media (min-width: 768px)单独重置对齐方式，或改用text-end控制单个按钮
最容易被忽略的一点：所有 Flex 对齐类（justify-content-*、align-items-*）都只作用于**直接子元素**，中间插一层非 flex 容器，对齐就断了；另外，gap 在换行后依然生效——第二行第一个子项和第一行最后一个子项之间也有 gap，这点常被漏掉。
