justify-content-between没反应的最常见原因是父容器未加d-flex类，因该类必须显式声明display:flex，否则所有justify-content-*类均无效；正确写法需同时添加d-flex和justify-content-between。

直接加 justify-content-between 就行，但必须确保父容器是 Flex 容器（即带 d-flex），否则类名完全不生效。

为什么 justify-content-between 没反应？

最常见原因是父元素没加 d-flex。Bootstrap 所有 Flex 工具类（包括 justify-content-*、align-items-*）都只在 display: flex 容器上起作用，浏览器不会自动推断。

• 错误写法：
  左右
  —— 缺 d-flex，无效
• 正确写法：
  左右
• 如果父容器是 .row，它默认是 flex，但只对直接子项（即 .col）生效；若想控制 .col 内部按钮两端对齐，得给那个 .col 加 d-flex justify-content-between

两端对齐的两种典型结构

一种是“首尾贴边、中间无空隙”，另一种是“一左一右、中间留白”。选哪个取决于你是否希望两个元素之间有间距。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• justify-content-between：第一个元素左贴边，最后一个右贴边，其余元素（≥3个时）等距分布 —— 适合导航栏、表单操作区
• ms-auto：只推一个元素到右侧，其余保持左对齐 —— 更轻量，适合按钮组合，比如 取消确认
• 别混用：justify-content-between 和 ms-auto 同时加在同一个容器里，会导致行为冲突或右侧元素被挤出视口

响应式下怎么保持两端对齐？

加断点前缀即可，比如 justify-content-md-between，但注意配套的 d-md-flex 必须同时存在，否则断点下 Flex 容器失效，对齐自然也失效。

• 小屏堆叠、中屏以上两端对齐：
  ...>

  ...>
• 更稳妥写法：统一用 d-flex + 响应式对齐类，如 justify-content-start justify-content-md-between，让小屏左对齐、中屏起两端对齐
• 避免只写 justify-content-md-between 而漏掉 d-md-flex，这是响应式 Flex 布局最常见的失效原因

真正容易被忽略的是：当子元素本身是块级且未设宽时，justify-content-between 仍有效；但如果其中某个子项用了 flex-shrink: 1（比如 Bootstrap 默认的 .btn 在窄容器里会收缩），它可能被压缩变形——这时加 flex-shrink-0 锁定宽度更可靠。