bootstrap 5 中让 btn-group 垂直堆叠需用 flex-column 类而非已移除的 btn-group-vertical，并配合 role="group"；响应式可叠加 flex-md-row 等断点类；含 dropdown 时须加 position-relative 防截断。
Bootstrap 5 怎么让 btn-group 垂直堆叠？
Bootstrap 5 默认的 btn-group 是水平排列的，想垂直堆叠必须显式加 flex-column 类——不是 btn-group-vertical（那个在 Bootstrap 4 里用，5 里已移除）。
常见错误是照着旧文档写 <div class="btn-group-vertical">，结果样式完全不生效，按钮还是横着排。
<ul><li>正确写法：<code><div class="btn-group flex-column">
<li>必须配合 <code>role="group" 保持语义可访问性
<button></button> 或 <a></a> 不需要额外类，但建议统一加 class="btn"
btn-group-sm 或 btn-group-lg，它们只影响尺寸，不影响方向，仍需叠加 flex-column
flex-column 和 flex-wrap 冲突怎么办？
当父容器本身有 flex-wrap: wrap（比如在 btn-toolbar 里），flex-column 可能被覆盖或表现异常，按钮看似垂直、实则错位或换行。
根本原因是 flex 子项的 flex-direction 不会自动覆盖父级的 flex-wrap 行为；它只定义主轴方向，而换行由 flex-wrap 控制。
- 最稳解法：给
btn-group容器加style="flex-wrap: nowrap;"内联样式，或自定义 CSS 类强制关闭换行 - 避免嵌套在
btn-toolbar里再套垂直组——btn-toolbar本意是水平工具栏，垂直场景建议单独使用flex-column - 检查 DevTools 的 computed styles，确认
flex-direction确实是column，且没被其他规则（如!important）覆盖
响应式垂直按钮组怎么切？
纯垂直在小屏可能合理，但在桌面端你往往希望「小屏垂直、大屏水平」，Bootstrap 5 的响应式类可以直接作用于 flex 方向。
基于“创意扇形排列卡片画廊”制作的前端特效源码，包含扇形卡片、旋转展开、层级聚焦、键盘切换，打开 index.html 即可直接查看效果，可替换标题、颜色和图形元素复用。 下载包已经整理好特效舞台、样式变量、动画规则和必要脚本，适合用于学习当前效果的实现方式，也方便替换文字、颜色、图形或图片后直接复用。
注意：没有 flex-md-row 这种写法——Bootstrap 的响应式 flex 工具类是 flex-{breakpoint}-{direction}，其中 {direction} 必须是 row 或 column，不能省略。
- 移动端垂直、桌面端水平：
class="btn-group flex-column flex-md-row" - 竖屏手机垂直、横屏手机/平板水平：
class="btn-group flex-column flex-sm-row" - 别漏掉基础
flex-column，否则断点类失效（因为响应式类是“覆盖”，不是“追加”） - 测试时用设备模拟器切换 orientation，别只看宽度断点——有些安卓手机横屏时宽度仍属
sm范围，但用户预期是水平布局
垂直按钮组里加下拉菜单出问题？
在 flex-column 的 btn-group 里放 dropdown，下拉菜单常被截断或定位偏移。这是因为 dropdown-menu 默认用 position: absolute，而父级 btn-group 没有 position: relative，导致菜单相对视口或最近定位祖先定位，而不是按钮本身。
- 必须给包含下拉按钮的直接父元素加
position-relative（通常是那个<div class="btn-group">） <li>如果整个按钮组是垂直的，且下拉按钮在中间，还要留意 <code>dropdown-menu的top/left计算依赖按钮高度，flex-column下按钮间有 gap，可能导致菜单上飘 - 临时修复 gap 影响：给
btn-group加gap: 0，或改用margin-bottom控制间距，避免 flex gap 干扰 dropdown 定位逻辑
垂直按钮组真正难的不是写法，而是和 dropdown、input-group、disabled 状态、focus outline 这些交互细节的耦合——每个都可能悄悄破坏布局，得一个个 inspect 元素验证。
