最稳方式是flex+媒体查询：移动端column竖排，桌面端min-width:768px切row横排并加flex-wrap:wrap防撑爆；避免btn-group响应式陷阱，推荐btn-toolbar语义化方案。
直接用 flex + 媒体查询是最稳、最可控的方式，比依赖框架类名或硬套 btn-group 更可靠。
用 flex-direction 切换按钮流向
移动端默认竖排、桌面端横排是主流做法，核心就是控制容器的 flex-direction：
- 初始设
flex-direction: column，按钮自然堆叠，不挤、不溢出 - 在
@media (min-width: 768px)中切为row，并加flex-wrap: wrap防止按钮过多时单行撑爆（比如 iPad 横屏） - 别反向写
max-width: 767px，容易漏掉 768px 这个临界点，导致部分设备样式错乱 - 按钮自身加
max-width: 100%和box-sizing: border-box，避免文字长时高度不一致或内容撑破容器
避免 btn-group 的响应式陷阱
btn-group 在 Bootstrap 5 中默认是 inline-flex 且 flex-wrap: nowrap，它本就不是为响应式折行设计的。强行改它容易踩坑：
- 给
btn-group加flex-wrap: wrap后，若子按钮没设flex-basis或max-width，仍可能横向撑宽容器 -
btn-group-vertical是硬编码flex-direction: column，带!important，无法用flex-md-row覆盖 - 外层套
d-none d-md-block会导致小屏按钮完全消失，逻辑断裂 - 如果已有大量
btn-group实例，最小侵入补救只需一行 CSS：.btn-group { flex-wrap: wrap; }，再配合子项flex: 0 0 auto
用 btn-toolbar 实现真响应式按钮组
btn-toolbar 是语义更准、支持断点类的原生方案，比硬改 btn-group 更干净：
立即学习“前端免费学习笔记（深入）”；
- 结构上用
<div class="btn-toolbar"><div class="btn-group flex-column flex-md-row">...</div></div> -
flex-column全局生效，flex-md-row在 ≥768px 时覆盖为横排，无需额外媒体查询 - 按钮数量多时，加
gap-2控制间距，避免移动端按钮过密 - 子按钮不用加额外类，
btn默认适配flex容器，也不影响data-bs-toggle下拉菜单行为
真正难的不是“怎么排”，而是按钮宽度动态变化时的视觉对齐——比如文字长度差异大，又没约束 white-space，就会导致换行后高度不一，破坏堆叠整齐度。这点最容易被忽略。
