我使用的是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%;
}
发布于 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>
发布于 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>
发布于 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/
https://stackoverflow.com/questions/14205125
复制相似问题