使用 Bootstrap btn-group-justified 布局,我有一组按钮,如下所示:
但我需要它看起来像这样:
是否可以更改 bootstraps 对齐布局以适应这样的情况?
我知道我可以在不使用 bootstraps 对齐布局的情况下做到这一点,但我确实需要按钮组占据整个宽度并且与其他按钮组的宽度相同。
最佳答案
btn-group-justified
类具有固定的表格布局,因此具有 btn-group
类的子元素就像表格单元格一样。您只需要更改它们的宽度。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
margin-top: 10px;
}
.btn-group-justified > .btn-group:nth-of-type(odd) {
width: .25%;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group btn-group-justified" role="group" aria-label="">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Mango</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Junk</button>
</div>
</div>
</div>
</div>
</div>
关于css - 使用 bootstraps btn-group-justified 布局时是否可以使用不同宽度的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32800224/