最稳妥方案是用.btn-group容器包裹按钮并添加role="group"，它自动清除间隙、无缝拼接；错误做法是遗漏role导致无障碍问题或直接并列写按钮。
Bootstrap 5 中用 btn-group 实现按钮平铺排列
直接用 btn-group 容器包裹多个 btn，再加 btn-group-lg 或 btn-group-sm 控制尺寸，是最稳妥的平铺方案。它会自动清除按钮间默认的外边距，并让它们无缝拼接。
常见错误是只写 <div class="btn-group"><button>A</button><button>B</button></div> 却忘了加 role="group" —— 屏幕阅读器可能无法正确识别按钮组语义，部分无障碍检测工具会报 warning。
- 必须为
btn-group添加role="group"属性 - 按钮需为同级子元素，不能嵌套在其他 div 或 span 里
- 若按钮含图标（如
<i class="bi bi-plus"></i>），确保图标类名不破坏行高对齐；必要时加align-middle
响应式断点下按钮自动换行怎么办
当按钮数量多、容器窄（比如小屏）时，btn-group 默认不会换行，而是横向溢出或压缩——这不是“平铺”，而是“挤在一起”。要让它在小屏下转为垂直堆叠，得手动干预。
Bootstrap 5 不提供原生的“响应式按钮组”类，得靠自定义 CSS 或借助 flex-wrap + 媒体查询：
.btn-group-responsive {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.btn-group-responsive > .btn {
flex: 1 1 calc(50% - 0.25rem);
}
@media (min-width: 576px) {
.btn-group-responsive > .btn {
flex: 1 1 auto;
}
}注意：这里用了 gap 而非 margin，避免父子 margin 合并问题；flex: 1 1 auto 让按钮在中屏以上平均占满父容器，且不强制等宽（适配文字长度差异）。
不用 btn-group，纯 Flex 实现更灵活的平铺
如果按钮需要不同宽度（比如一个“取消”窄按钮 + 一个“确认”宽按钮），或者要兼容旧版 Bootstrap（v4 及以下），用 d-flex + gap 更可控。
关键点在于：Bootstrap 5 的 d-flex 已支持 gap，但 v4 需用 mx-n2 + px-2 模拟间距，容易错位。
- v5 推荐写法：
<div class="d-flex gap-2"><button class="btn btn-primary">A</button><button class="btn btn-outline-secondary">B</button></div> - 按钮高度不一致？加
align-items-center统一基线 - 想让最后一个按钮撑满剩余空间？给它加
ms-auto或flex-grow-1
为什么 btn-block 在 Bootstrap 5 里失效了
btn-block 是 Bootstrap 4 的类，v5 已移除。有人照着老文档写 class="btn btn-block"，结果按钮既没变宽也没平铺——它被完全忽略，退化成普通按钮。
替代方案只有两个：要么用 w-100 强制 100% 宽度（但这是单个按钮行为，不是“多个按钮平铺”），要么回到前面说的 btn-group 或 d-flex 方案。
真正容易被忽略的是：平铺 ≠ 等宽。很多场景下，按钮文字长度差异大，硬塞进等分 flex 容器会导致右侧文字被截断或换行。这时候宁可放弃“视觉平铺”，改用语义清晰的间距控制（gap-2 + 自适应 flex），比强行拉伸更可靠。
