justify-content-between 在 bootstrap 5 中将剩余空间均分到相邻子项之间，而非左右钉住；三按钮时因按钮宽度不一且仅分配项间间隙，导致中间项视觉偏右，属 flex 标准行为。
justify-content-between 在 bootstrap 5 中不是“让子元素左右钉住”，而是把**剩余空间均分到相邻项目之间**。三按钮排成一行时中间项看起来偏右，不是写错了，是它本就如此工作。
为什么 justify-content-between 会让三个按钮不等距？
主轴上：首个元素紧贴起点，末个元素紧贴终点，中间所有间隙被均分。三个子项 → 两个间隙 → 每个间隙宽度相等。但人眼会把“按钮自身宽度+左右间隙”当作视觉单元，当按钮宽度不一致时（比如「返回」「提交」「取消」字数不同），中间项自然显得右偏。
- 这不是 Bug，是 flex 标准行为，
justify-content-between从不控制元素自身宽度或内外边距 - 它只分配“元素之间的空白”，不处理“元素周围空白”
- 如果容器有 padding 或子项有 margin，会进一步干扰视觉平衡
justify-content-between 和 justify-content-evenly 的关键区别
两者都用于多项目水平分布，但空间分配逻辑完全不同：
-
justify-content-between：仅在项目之间插入等宽间隙，首尾无额外空隙 -
justify-content-evenly（Bootstrap 5.3+ 支持）：让每个项目“周围”的空白相等，即首项前、项间、末项后间隙全部等宽 → 三按钮真正视觉等距 - 若项目数为 2，
between和evenly效果一致；超过 2 个时差异明显
在 .row 容器里用 justify-content-between 要注意什么？
Grid 系统中的 .row 默认是 flex 容器，但它的子项是 .col-*，而这些列自带 padding（gutter）。这会导致实际对齐位置被干扰：
- 不要依赖
.row.justify-content-between对齐内部按钮/图标等原子组件，容易因列 padding 错位 - 更稳妥的做法：在
.row内嵌一个<div class="d-flex justify-content-between"> 作为纯 flex 容器，把按钮直接放进去 <li>如果必须用 <code>.row，记得确认gutter是否已通过gx-0清除，否则左右留白不一致 - 当容器总宽度小于所有子项宽度之和时，flex 不再有“剩余空间”可分配，
between退化为默认排列（类似start） - 检查是否在小屏下子项用了固定宽度（如
width: 120px），而没配合flex-shrink: 1或响应式类（如col-auto） - 避免在 flex 容器上同时设
min-width和justify-content-between，前者可能卡死空间计算
移动端适配时 justify-content-between 突然失效？
常见于媒体查询切换后布局坍缩或容器宽度不足：
真正要实现“首左、中居、尾右”的三段式布局，justify-content-between 是最轻量解法；但若追求视觉等距，别硬调 margin，直接升到 Bootstrap 5.3+ 用 justify-content-evenly —— 那才是设计意图匹配的工具。
