最直接方案是.d-flex加.justify-content-between，需确保父容器显式声明Flex布局，否则对齐类无效；常见错误是遗漏.d-flex或误用text-align。
用 justify-content-between 类最直接
Bootstrap 5 的 Flex 实用类默认就支持水平分布，.d-flex + .justify-content-between 是最轻量、语义最清晰的方案。它不依赖父容器宽度是否占满，也不需要额外 wrapper 元素。
常见错误是只加 .d-flex 忘了对齐类，结果两个按钮还是堆在一起；或者误用 .text-end（仅影响内联元素对齐，对 flex 子项无效）。
示例结构：
<div class="d-flex justify-content-between"> <button class="btn btn-primary">取消</button> <button class="btn btn-success">确认</button> </div>
如果按钮在 form 或 card-footer 里怎么办
某些 Bootstrap 组件（如 .card-footer、.modal-footer）本身已设为 flex 容器，但默认是 justify-content-end，所以直接加 .justify-content-between 就能覆盖——不需要额外套 .d-flex。
但在 <form> 中要小心：原生 form 不是 flex 容器，必须显式添加 .d-flex 和对齐类，否则无效。
- ✅ 正确：
<div class="card-footer justify-content-between">...</div> - ❌ 错误：
<form class="justify-content-between">...</form>（缺少.d-flex）
想留间距又不想撑满？换用 ms-auto
当右侧按钮需要右对齐、左侧按钮保持左对齐，但中间留出固定间隙时，ms-auto 比 justify-content-between 更可控——它把右侧按钮“推”到最右，左侧按钮不动，中间空白可自由加 gap 或 mx-* 类。
适用场景：按钮旁还有文字或图标，或需响应式微调位置。
<div class="d-flex gap-2"> <button class="btn btn-outline-secondary">重置</button> <button class="btn btn-primary ms-auto">提交</button> </div>
为什么不用 float 或 text-align
Bootstrap 5 已彻底移除 float 布局类（如 .float-start），且 text-align: right 对 flex 子项完全无效——因为 flex 项的对齐由容器的 justify-content 或自身 margin 控制，文本对齐属性不参与布局计算。
强行用旧方式会导致：
- 右侧按钮无法真正贴右边界（尤其在响应式断点下）
- 按钮垂直居中失效（flex 的
align-items被破坏） - 与 Bootstrap 5 的 spacing、grid 系统产生冲突
真正容易被忽略的是：**父容器必须是 flex 容器才能触发 flex 对齐行为**。哪怕只漏一个 .d-flex，所有 justify- 类都会静默失效——没有报错，也没有视觉反馈，这是调试时最常卡住的地方。
