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

Posted 2023-02-22

【中文标题】如何在 Bootstrap 中获取跨越父级全宽的按钮组？

【英文标题】：How to get button groups that span the full width of a parent in Bootstrap?

【发布时间】：2016-09-08 11:37:53

【问题描述】：

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

【问题讨论】：

可能是这个Justified button groups

【参考方案1】：

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

【讨论】：

完美、简单、标准。谢谢。

将w-100 类也添加到.btn-group 元素中。

对我来说，不用在bootstrap 4.5.2 中的每个按钮类中添加w-100 也可以正常工作

【参考方案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>

【讨论】：

最佳使用方法

如果可以的话，我会投票两次；这就像一个魅力

对于那些使用 bootstrap 4.5 的用户，只需使用 .d-flex 和 .btn-group

【参考方案3】：

您还可以使用引导程序 btn-block 将跨越父级。

通过添加 .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/

【参考方案4】：

在 Bootstrap 4 中，在 .btn-group 上使用 .d-flex，在各个按钮上使用 .w-100：

.btn-group.d-flex(role='group')
  button.w-100.btn.btn-lg.btn-success(type='button') ?
  button.w-100.btn.btn-lg.btn-danger(type='button') ?
  .btn-group(role='group')
    button#btnGroupDrop1.btn.btn-lg.btn-light.dropdown-toggle(type='button', data-toggle='dropdown')
      | •••
    .dropdown-menu
      a.dropdown-item(href='#') An option
      a.dropdown-item(href='#') Another option

【参考方案5】：

您也可以使用.btn-group-justified。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="btn-group btn-group-justified">
    <a href="button" class="btn btn-default">Left</a>
    <a href="button" class="btn btn-default">Middle</a>
    <a href="button" class="btn btn-default">Right</a>
  </div>
</div>

【讨论】：

过时了。删除了 .btn-group-justified。作为替代，您可以使用 作为 .w-100 元素的包装器。 getbootstrap.com/docs/4.3/migration/#button-group

【参考方案6】：

<div class="col-sm-12">
<div class="btn-group btn-block" role="group">
    <button class="btn btn-success col-sm-10" type="submit">Button 1</button>
    <button class="btn btn-danger col-sm-2" type="submit">Button 2</button>
</div>