Bootstrap5怎么让两个Button分居两侧-Bootstrap教程-PHP中文网

最直接方案是.d-flex加.justify-content-between，需确保父容器显式声明flex布局，否则对齐类无效；常见错误是遗漏.d-flex或误用text-align。

bootstrap5怎么让两个button分居两侧

用 `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> 中要小心：原生 form 不是 flex 容器，必须显式添加 .d-flex 和对齐类，否则无效。

VPS Bootstrap

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

下载

✅ 正确：<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 控制，文本对齐属性不参与布局计算。

强行用旧方式会导致：