如何在 Bootstrap 中获取跨越父级整个宽度的按钮组？

Question

在 Bootstrap 中，如何获得像下面这样跨越父元素整个宽度的按钮组？ （与“.btn-block”类一样，但适用于一组 http://getbootstrap.com/css/#buttons-sizes ）

 <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

原文由 Max 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Flexbox 可以做到这一点。

 .btn-group.special {
  display: flex;
}

.special .btn {
  flex: 1
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group special" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

原文由 Paulie_D 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Bootstrap 4 和 Bootstrap 5 的正确解决方案（来自 Bootstrap 4 迁移文档）：

删除了 .btn-group-justified。作为替代，您可以使用 <div class="btn-group d-flex" role="group"></div> 作为元素的包装器 .w-100 。

例子：

 <div class="btn-group d-flex" role="group" aria-label="...">
  <button type="button" class="btn btn-default w-100">Left</button>
  <button type="button" class="btn btn-default w-100">Middle</button>
  <button type="button" class="btn btn-default w-100">Right</button>
</div>

来源： https ://getbootstrap.com/docs/4.0/migration/#button-group

编辑：使用 Bootstrap 5 验证的解决方案

原文由 Diego P. Steiner 发布，翻译遵循 CC BY-SA 4.0 许可协议