Html 如何在 Bootstrap 中获取跨越父项全宽的按钮组？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37190248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get button groups that span the full width of a parent in Bootstrap?
提问by Max
In Bootstrap, how can I get a button group like the following that span the full width of a parent element? (like with the ".btn-block" class, but applied to a group http://getbootstrap.com/css/#buttons-sizes)
在 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>
回答by Diego P. Steiner
Correct solution for Bootstrap 4(from its migration documentation):
Bootstrap 4 的正确解决方案（来自其迁移文档）：
Removed .btn-group-justified. As a replacement you can use
<div class="btn-group d-flex" role="group"></div>as a wrapper around elements with.w-100.
删除了 .btn-group-justified。作为替代，您可以使用
<div class="btn-group d-flex" role="group"></div>作为与周围元素的包装.w-100。
Example:
例子：
<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>
Source: https://getbootstrap.com/docs/4.0/migration/#button-group
来源：https: //getbootstrap.com/docs/4.0/migration/#button-group
回答by Paulie_D
Flexbox can do that.
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>回答by Ryan Brodie
In Bootstrap 4, make use of .d-flexon your .btn-groupand .w-100on individual buttons:
在 Bootstrap 4 中，.d-flex在您.btn-group和.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
回答by lzoesch
You can also use bootstraps btn-blockwill span across parent.
您还可以使用 bootstrapbtn-block将跨越父级。
Create block level buttons—those that span the full width of a parent—by adding .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>
回答by mhatch
You can also use .btn-group-justified.
您也可以使用.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>