justify-content-between 不留白是因为它让首项贴左、末项贴右，首尾到容器边缘距离为0；真正实现两端留白+中间等距需用gap配合padding，而非justify-content-between。
justify-content-between 为什么两端没留白？
因为它根本不会在两端留白。justify-content-between 的语义是“首项贴左、末项贴右、中间空隙均分”，首尾到容器边缘的距离永远是 0。你看到的“两端对齐”其实是视觉错觉——它对齐的是容器边界，不是内边距边界。
常见错误包括：给父容器加 padding 后仍用 justify-content-between，结果是首尾项被推离边缘，但中间间隙不变，整体不对称；或误以为 text-center + ms-auto 能模拟两端对齐，实际只推右不控左。
- 必须显式启用 Flex 布局：
d-flex（或d-inline-flex）不可省略 - 子元素至少两个，否则
justify-content-between退化为左对齐 - 子元素不能设
flex: 1、w-100或flex-grow-1，否则抢占空间，间隙消失
真正实现“两端留白 + 中间等距”的解法只有 gap
gap 是唯一能同时控制项与项之间空白、且天然避开首尾额外间隙的属性。它不依赖子项数量或顺序，也不干扰 justify-content 的主轴分布逻辑。
写法示例：
<div class="d-flex gap-3"> <button>左</button> <button>中</button> <button>右</button> </div>
效果：最左按钮离容器左边缘 = gap 值，最右按钮离右边缘 = 同样值，所有按钮间空隙也等于该值。
- 单行布局：用
gap-3（等价于column-gap: 1rem）就够了 - 多行布局：需双值写法，如
gap-2 gap-md-3，分别控制小屏行距/列距和大屏列距 - 响应式场景下，
gap比justify-content-around更可靠——后者在子项宽度不均时会导致视觉偏移
Bootstrap 5.3+ 可用 align-content-evenly 实现三段式等距
如果目标是“首项前、项间、末项后”三处间隙完全相等（比如导航栏 logo + 中间菜单 + 右侧头像），align-content-evenly 在多行容器中更精准，但注意它只对实际换行的 Flex 容器生效。
不过大多数两端对齐需求是单行，这时应优先用原生 CSS 组合：
<div class="d-flex" style="column-gap: 1rem; padding: 0 1rem;"> <span>左侧文字</span> <span>中间文字</span> <span>右侧文字</span> </div>
-
padding控制首尾留白，column-gap控制中间间距，二者独立且可精确调控 - 不要混用
justify-content-between和gap，否则首尾贴边 + 中间多一档间隙，反而失衡 - 旧版 Bootstrap（align-content-evenly，直接忽略该类，别指望它生效
移动端堆叠时怎么保持两端对齐逻辑？
竖排时主轴变成垂直，justify-content-between 就变成“顶部贴顶、底部贴底”，不符合“左右两端对齐”的原始意图。此时应切换为 flex-column + gap + align-items-center（水平居中）或 align-items-start（左对齐）。
推荐写法：
<div class="d-flex flex-column flex-md-row gap-2 gap-md-3"> <div>第一项</div> <div>第二项</div> <div>第三项</div> </div>
- 小屏竖排：靠
gap-2控制上下间距，align-items-*控制水平对齐 - 大屏横排：靠
gap-md-3控制左右间距，justify-content-*可选（通常用justify-content-start避免干扰） - 切记：别在子项上再加
mb-2或me-3，会和gap叠加导致间距翻倍
真正的难点不在类名拼写，而在于判断当前是否需要“首尾内缩”还是“首尾贴边”。一旦混淆这两者，所有对齐类都会导向错误结果。
