是否将按钮组的宽度设置为100%并使按钮的宽度相等？
是否将按钮组的宽度设置为100%并使按钮的宽度相等？
提问于 2013-01-08 06:22:26
我使用的是Bootstrap，我希望将整个btn-group的宽度设置为其父元素的100%。我也希望里面的纽扣是等宽的。事实上，我也不能做到这一点。
我在这里创建了一个JSFiddle：http://jsfiddle.net/BcQZR/12/
下面是HTML：
<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>这是我当前的CSS，它不起作用：
#colours {
width: 100%;
}回答 5
Stack Overflow用户
发布于 2014-02-28 06:10:16
Bootstrap具有.btn-group-justified css类。
它的结构取决于你使用的标签的类型。
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div><div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>Stack Overflow用户
发布于 2014-05-10 23:14:11
不需要额外的css，.btn-group-justified类可以做到这一点。
您必须将其添加到父元素中，然后将每个btn元素包装在带有.btn-group的div中，如下所示
<div class="form-group">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
</div>
<div class="btn-group">
<button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
</div>
</div>
</div>Stack Overflow用户
发布于 2014-02-18 17:16:07
我不喜欢在.btn上设置宽度的解决方案，因为它假设.btn-group中总是有相同数量的项目。这是一个错误的假设，并导致臃肿的、特定于表示的CSS。
更好的解决方案是更改带有.btn块的.btn组和子.btn的显示方式。我相信这就是你要找的：
.btn-group.btn-block {
display: table;
}
.btn-group.btn-block > .btn {
display: table-cell;
}这里有一个小把戏：http://jsfiddle.net/DEwX8/123/
如果你更喜欢等宽的按钮(在合理范围内)，并且只能支持支持flexbox的浏览器，那么可以尝试这样做：
.btn-group.btn-block {
display: flex;
}
.btn-group.btn-block > .btn {
flex: 1;
}这里有一个小把戏：http://jsfiddle.net/DEwX8/124/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14205125
复制相关文章
相似问题