应使用 btn-toolbar + flex-column 和 flex-md-row 实现响应式按钮组，避免硬改 btn-group；btn-group-vertical 不支持断点切换，自定义 CSS 补救需谨慎控制 flex-wrap 和 flex-basis。
Bootstrap 5 中 btn-group 在小屏幕下不换行怎么办
默认的 btn-group 是 inline-flex 容器，flex-wrap: nowrap，小屏下按钮会溢出或被压缩，不会自动折行。这不是 Bug，是设计使然——它本就不是为响应式堆叠而生。
解决思路不是“修复”它，而是换用更合适的组件或手动覆盖行为：
- 优先用
btn-toolbar+flex-column（配合flex-md-row）实现「移动端竖排、中屏及以上横排」 - 若坚持用
btn-group，需显式添加flex-wrap: wrap并重设子项flex-basis，否则按钮仍可能撑宽容器 - 避免给
btn-group设固定宽度，否则flex-wrap失效
用 btn-toolbar 实现真响应式按钮组
btn-toolbar 语义上就是「一组可布局的按钮容器」，原生支持响应式断点类，比硬改 btn-group 更可靠。
<div class="btn-toolbar" role="toolbar">
<div class="btn-group flex-column flex-md-row" role="group">
<button type="button" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-outline-secondary">取消</button>
<button type="button" class="btn btn-link">帮助</button>
</div>
</div>关键点：
-
flex-column在所有断点生效，flex-md-row在md（768px）及以上覆盖为横向 - 子按钮无需额外类，
btn默认适配 - 如果按钮数量多，可加
gap-2控制间距，避免移动端过密
为什么不用 btn-group-vertical？
btn-group-vertical 确实能堆叠，但它禁用响应式切换：一旦加上，就永远竖排，无法在桌面端恢复横排。它的 CSS 规则是硬编码的 flex-direction: column，没有断点钩子。
常见误用场景：
- 在
btn-group-vertical外层套d-none d-md-block—— 这会导致小屏无按钮，逻辑断裂 - 试图用
flex-md-row覆盖btn-group-vertical—— 失败，因为后者 specificity 更高且用!important - 期望它和
btn-group一样支持data-bs-toggle下拉菜单 —— 实际上垂直组对下拉支持不一致，容易错位
自定义 CSS 的最小侵入方案
如果项目已大量使用 btn-group 且不能重构结构，可用极简 CSS 补救：
.btn-group-mobile {
flex-wrap: wrap;
}
.btn-group-mobile .btn {
flex: 1 1 calc(50% - 0.5rem); /* 两列，留 gap */
}
@media (min-width: 768px) {
.btn-group-mobile {
flex-wrap: nowrap;
}
.btn-group-mobile .btn {
flex: auto;
}
}注意：
- 不要直接改
.btn-group全局样式，避免影响其他地方 -
calc(50% - 0.5rem)中的0.5rem要匹配你实际用的gap值（如用gap-3就是1rem） - 三按钮以上时，建议改用
flex: 1 1 calc(33.333% - 0.666rem)，但需测试不同屏幕下的 rounding 误差
响应式按钮排列最易被忽略的，是按钮内容长度差异——比如中英文混排时，“Save” 和 “保存” 宽度差一倍，会破坏等分逻辑。与其死磕 flex 计算，不如在小屏下统一用 flex-column 更稳。
