justify-content-between未让按钮等间距，是因为父容器缺少d-flex类导致Flex布局未启用，且该属性要求至少两个子元素、不与gap混用、不适用于单行多行混合场景。
justify-content-between 为什么没让按钮等间距？
因为只写了 justify-content-between，但父容器没加 d-flex。flex 对齐类不会自动启用 flex 布局，浏览器看到的是普通 block 容器，justify-content-between 完全被忽略。
必须显式声明：class="d-flex justify-content-between"，否则无论写多少个 justify-content-* 都无效。
- 常见错误：给
<div class="text-center">加justify-content-center——text-center是靠text-align实现的，和 Flex 无关 - 子元素少于 2 个时，
justify-content-between看不出效果（首尾贴边 → 实际就是左对齐） - 如果子元素用了
flex-grow-1或w-100，会抢占空间，破坏等距分布逻辑
gap 和 justify-content-between 能一起用吗？
能，但作用不同，别混用目的。
justify-content-between 控制子元素在主轴上的分布方式（首尾贴边、中间空隙均分）；gap-3 是固定值间距，加在所有相邻子项之间，包括首项前、末项后无额外间隙。
- 想“首尾留白 + 中间等距”，用
justify-content-around或justify-content-evenly - 想“严格等距且包含首尾到容器边缘的距离”，得退回到原生 CSS：
style="column-gap: 1rem; padding: 0 1rem;" - 同时用
justify-content-between和gap-3会导致：首尾贴边 + 中间多出 gap 值的空隙 → 实际不是“等间距”，而是“首尾紧贴 + 中间多一档”
移动端堆叠时怎么保持等距？
用响应式方向切换 + 统一间距控制，而不是靠 justify-content-*。
竖排时主轴变成垂直，justify-content-between 就变成“上下贴边”，不符合“等距堆叠”预期。此时该用 flex-column + gap-3。
- 写法：
class="d-flex flex-column gap-3"（小屏竖排等距） - 桌面端切回横排：
class="d-flex flex-column flex-md-row gap-3" - 注意：
gap在换行后依然生效——第二行第一个子项和第一行最后一个子项之间也有 gap，这点常被忽略 - 别在子项上再加
mb-2，否则 gap + margin 叠加，间距翻倍
为什么 align-items-center 搭配 justify-content-between 不居中？
因为 align-items-center 控制交叉轴（垂直方向），而 justify-content-between 控制主轴（水平方向），两者不冲突。但如果容器没设高度，或子元素是 inline 元素，视觉上就“看不出居中”。
- 父容器需有明确高度（如
min-height: 200px或height: 100vh），否则垂直方向无参照系 - 确保子元素是
d-flex的**直接子项**，中间不能套多层未设d-flex的 div - 文字过长时，
align-items-center可能触发换行，改用align-items-start+text-truncate更可控
