因为bootstrap 4+彻底移除了.btn-group-justified，其依赖的table布局被弃用，官方推荐用flexbox替代：外层.btn-group加w-100，内层按钮加flex-fill（bs5）或flex-grow-1（bs4）。
为什么 .btn-group-justified 在 Bootstrap 4+ 中失效了
因为 Bootstrap 4 彻底移除了 .btn-group-justified —— 它依赖的 table 布局（display: table）被弃用，官方推荐 Flexbox 替代。如果你在 Bootstrap 4 或 5 项目里写 class="btn-group btn-group-justified"，按钮组不会均分宽度，甚至可能错位或堆叠。
常见错误现象：
- 按钮挤在左侧，右侧大片空白
- 响应式断点下按钮宽度突变、文字换行
- 嵌套
<a></a>按钮时点击区域异常缩小
Bootstrap 4/5 中实现等宽按钮组的正确写法
用 Flexbox 布局替代 table，核心是两层结构：外层 btn-group 设为 flex，内层每个按钮设为 flex: 1。不依赖废弃类，兼容性好，语义清晰。
实操建议：
- 外层容器必须用
<div class="btn-group w-100">（<code>w-100确保占满父容器） - 每个按钮（
<button></button>或<a></a>）加class="flex-fill"（Bootstrap 5）或class="flex-grow-1"（Bootstrap 4） - 避免对按钮单独设
width或flex-basis，否则会破坏均分逻辑 - 如果按钮内含图标+文字，注意
white-space: nowrap防止文字折行挤压宽度
示例（Bootstrap 5）：
<div class="btn-group w-100" role="group"> <button type="button" class="btn btn-primary flex-fill">保存</button> <button type="button" class="btn btn-secondary flex-fill">取消</button> <button type="button" class="btn btn-outline-danger flex-fill">删除</button> </div>
用 <a></a> 标签做按钮时的坑
Bootstrap 允许用 <a></a> 代替 <button></button>，但 <a></a> 默认是 inline 元素，在 Flex 容器中行为不稳定。
容易踩的坑：
- 不加
class="d-block"或class="w-100"时，flex-fill可能不生效 -
<a></a>的默认text-decoration和color会干扰按钮视觉一致性，需显式重置 - 若链接带
href="#"，点击后页面跳到顶部，应加onclick="return false;"或用 JS 阻止默认行为
安全写法（Bootstrap 5）：
<div class="btn-group w-100"> <a href="#" class="btn btn-success flex-fill d-block">提交</a> <a href="#" class="btn btn-light flex-fill d-block">重置</a> </div>
响应式场景下按钮宽度突变怎么办
均分按钮组在小屏上容易因内容过长导致按钮溢出或文字换行，破坏“100%”预期。
关键处理点：
- 用
flex-wrap: wrap替代强制单行（加flex-nowrap反而更危险） - 小屏下改用垂直堆叠：
class="btn-group flex-column"+flex-fill，比强行压缩更可用 - 对超长按钮文本，用
text-truncate+title属性保留可读性 - 避免在
sm或xs断点下还坚持“两端对齐”，优先保障可点性
真正难处理的不是宽度计算，而是按钮内容长度不可控时的视觉妥协——这时候宁可放弃严格等宽，也要守住最小点击热区（44px × 44px）。
