如何在Bootstrap中获得跨越父级全宽度的按钮组？

Question

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

<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>

Answer 1

您还可以使用引导btn块将跨越父级。

通过添加.btn-block创建块级按钮-那些跨越父级全部宽度的按钮。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

https://getbootstrap.com/docs/4.0/components/buttons/

Answer 2

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>

Answer 3

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

远离的。btn组是正确的。作为替代，您可以使用

例子：

<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验证解决方案