如何在 Bootstrap 中获取跨越父级整个宽度的按钮组?
How to get button groups that span the full width of a parent in Bootstrap?
在Bootstrap中,如何获得像下面这样横跨父元素整个宽度的按钮组? (类似于“.btn-block”class,但应用于组 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>
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>
您也可以使用.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>
Bootstrap 4 和 Bootstrap 5 的正确解决方案(来自 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
.
示例:
<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
验证解决方案
在 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
您也可以使用引导程序 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>
<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>
在Bootstrap中,如何获得像下面这样横跨父元素整个宽度的按钮组? (类似于“.btn-block”class,但应用于组 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>
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>
您也可以使用.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>
Bootstrap 4 和 Bootstrap 5 的正确解决方案(来自 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
.
示例:
<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
验证解决方案在 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
您也可以使用引导程序 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>
<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>