Bootstrap 5.2中justify-content-between实现按钮两端对齐移动端错位问题

你遇到的问题核心是：小屏空间不足时，flex子项（按钮）默认不会自动收缩或换行，导致justify-content-between强制贴边后触发溢出。以下是几种无需调整响应式边距的原生Bootstrap解决方案：

方案1：允许按钮收缩+文本换行（保持横向排列） #

如果需要在小屏仍保持按钮横向排列，给按钮添加flex-shrink-1和text-wrap类：

<div class="d-flex justify-content-between">
  <button class="btn btn-primary flex-shrink-1 text-wrap">左侧操作按钮</button>
  <button class="btn btn-secondary flex-shrink-1 text-wrap">右侧确认提交按钮</button>
</div>

• flex-shrink-1确保按钮在空间不足时可以收缩（覆盖可能存在的flex-shrink-0强制不收缩样式）
• text-wrap让按钮内文本自动换行，避免按钮因文本过长固定宽度过大

方案2：小屏自动换行堆叠 #

如果允许小屏时按钮纵向排列，给flex容器添加flex-wrap和gap类：

<div class="d-flex justify-content-between flex-wrap gap-2">
  <button class="btn btn-primary">左侧按钮</button>
  <button class="btn btn-secondary">右侧按钮</button>
</div>

• flex-wrap让按钮在空间不足时自动换行
• gap-2给按钮间添加间距，避免堆叠时过于拥挤
• 若要指定仅在<768px时换行，可替换为flex-sm-wrap，保持大屏横向两端对齐

方案3：用网格系统实现（最稳定的响应式适配） #

Bootstrap网格系统天生具备良好的响应式适配，用col-auto和ms-auto实现两端对齐：

<div class="row">
  <div class="col-auto">
    <button class="btn btn-primary">左侧按钮</button>
  </div>
  <div class="col-auto ms-auto">
    <button class="btn btn-secondary">右侧按钮</button>
  </div>
</div>

• col-auto让列宽度自适应按钮内容
• ms-auto将右侧列推至容器右端，实现两端对齐
• 小屏时若按钮宽度超过视口，会自动换行，不会触发溢出

以上三种方案均基于Bootstrap 5.2内置类实现，无需自定义响应式边距，根据你的布局需求选择即可。

内容的提问来源于stack exchange，提问作者PeteGO