.btn-group无法实现等宽，因其仅清除间距与圆角，未设置flex/table布局，子按钮仍按内容宽度渲染；Bootstrap 3需用.btn-group-justified（基于table），4+推荐Flexbox（容器display: flex+按钮flex: 1）。
Bootstrap 按钮组默认不等宽，想让按钮自动平分父容器宽度，必须用 .btn-group-justified（Bootstrap 3）或改用 Flexbox（Bootstrap 4+），不能只靠 .btn-group。
为什么 .btn-group 无法实现等宽？
因为 .btn-group 本身只是取消按钮间距和圆角，内部按钮仍按内容宽度渲染，没有布局控制逻辑。它不设置 display: flex 或 display: table，也不干预子元素的尺寸分配。
- 直接写多个
<button class="btn">并排 → 它们是独立内联元素，宽度由文字撑开 - 套一层
<div class="btn-group">→ 仅修复边距/圆角，不改变宽度行为 - 误加
.btn-block到每个按钮 → 所有按钮独占一行，不是水平等宽
.btn-group-justified 在 Bootstrap 3 中怎么用？
这是 Bootstrap 3 提供的原生方案，底层用 display: table 模拟表格布局，但有严格结构要求：
- 外层必须是
<div class="btn-group btn-group-justified"> - 每个按钮必须单独包裹在一层
<div class="btn-group">内（不能直接放<button>） - 推荐用
<button>标签，避免用<a>或<span>—— 后者在部分浏览器下display: table-cell渲染异常 - 必须补
role="group"和aria-label保证可访问性，否则屏幕阅读器可能无法识别为一组操作
示例结构：
<div class="btn-group btn-group-justified" role="group" aria-label="操作组">
<div class="btn-group">
<button type="button" class="btn btn-default">保存</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">取消</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">删除</button>
</div>
</div>
Bootstrap 4/5 怎么做等宽？别碰 .btn-group-justified
Bootstrap 4 起已移除 .btn-group-justified，官方推荐用 Flexbox。关键不是加类，而是控制 CSS 行为：
- 给容器设
display: flex，并确保它有明确宽度（如width: 100%） - 每个按钮加
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），才能真正均分剩余空间 - 避免用
flex-grow: 1单独写 —— 如果按钮内容过长，可能溢出或挤压其他按钮；flex: 1更稳 - 按钮间留空隙建议用
gap（现代浏览器），兼容旧版可用margin，但需注意首尾是否多出空白
最小可行样式：
.btn-group-flex {
display: flex;
width: 100%;
}
.btn-group-flex > button {
flex: 1;
margin: 0 2px;
}
下拉按钮混在等宽组里怎么处理？
下拉菜单按钮（.dropdown-toggle）在等宽布局中容易错位或宽度异常，因为它的 DOM 结构比普通按钮深一层：
- 如果用
.btn-group-justified（BS3），必须把整个下拉结构（含.dropdown-menu）包进一个<div class="btn-group">里，和普通按钮同级 - 如果用 Flexbox（BS4+），确保下拉容器（如
<div class="btn-group">）本身是 flex 项目的直接子元素，并给它flex: 1，而不是只给触发按钮设 - 常见错误：只给
<button class="btn dropdown-toggle">加flex: 1，忽略它外面的<div class="btn-group">—— 这会导致下拉菜单脱离按钮位置
Flexbox 下拉等宽示例结构：
<div class="btn-group-flex">
<button class="btn btn-primary">提交</button>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">更多</button>
<div class="dropdown-menu"><a class="dropdown-item">导出</a></div>
</div>
</div>
此时需对 .btn-group-flex > .btn-group 也应用 flex: 1，否则下拉按钮会收缩成内容宽度。
最易被忽略的一点：等宽不是纯视觉问题，它直接影响可访问性和移动端点击热区。用 table 方案时，语义结构断裂；用 Flexbox 时，若忘记设容器宽度或遗漏 flex-basis: 0，按钮会在小屏上堆叠或溢出。动手前先确认 Bootstrap 版本，再决定走哪条路。
