CSS Bootstrap 3 btn-group 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20804104/
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
Bootstrap 3 btn-group width
提问by Misiu
I have another Bootstrap related problem. I want to add radio and checkboxes to my form, I would like them also to take 100% width of form element.
我还有另一个与 Bootstrap 相关的问题。我想在我的表单中添加单选框和复选框，我希望它们也能占据表单元素的 100% 宽度。
I've added button group as this:
我添加了按钮组，如下所示：
<div class="form-group">
<label class="col-sm-3 control-label">Subscribe</label>
<div class="col-sm-9">
<div class="btn-group input-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="options" id="option1" />Yes</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" />Maybe</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option3" />No</label>
</div>
</div>
</div>
This gives me nice radio-like buttons:
这给了我漂亮的单选按钮：
But as You can see they have fixed width. Can this be fixed with bootstrap classes? Again here is my sample code: http://jsfiddle.net/Misiu/yy5HZ/5/
但正如你所看到的，它们的宽度是固定的。这可以通过引导类来解决吗？这里是我的示例代码：http: //jsfiddle.net/Misiu/yy5HZ/5/
回答by Schmalzy
Use the built in .btn-group-justifiedclass: Offical Docs
使用内置.btn-group-justified类：官方文档
Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
使一组按钮以相同的大小拉伸以跨越其父级的整个宽度。也适用于按钮组中的按钮下拉菜单。
Anchors:
锚点：
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
<a href="#" class="btn btn-default" role="button">Right</a>
</div>
Buttons:
纽扣：
To use justified button groups with
<button>elements, you must wrapeach button in a button group. Most browsers don't properly apply our CSS for justification to<button>elements, but since we support button dropdowns, we can work around that.
要将对齐的按钮组与
<button>元素一起使用，您必须将每个按钮包装在一个按钮组中。大多数浏览器都没有正确地将我们的 CSS 应用于<button>元素的对齐，但由于我们支持按钮下拉菜单，我们可以解决这个问题。
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<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>
回答by Markus Kottl?nder
You can simply use the bootstrap col-n classes so if you have 2 buttons you use col-xs-6on them. The problem is when you have 5 buttons for example. There is no class for that in the bootstrap grid system. So I woul use one of the following:
你可以简单地使用 bootstrap col-n 类，所以如果你有 2 个按钮，你可以使用col-xs-6它们。问题是当你有 5 个按钮时。bootstrap 网格系统中没有相关的类。所以我将使用以下方法之一：
To differenciate between groups with different number of buttons use additional custom classes:
要区分具有不同按钮数量的组，请使用其他自定义类：
CSS
CSS
.btn-group {
width: 100%;
}
.btn-group-2 label.btn {
width: 50%;
}
.btn-group-3 label.btn {
width: 33.3%;
}
HTML
HTML
<div class="btn-group btn-group-3 input-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="options" id="option1" />Yes</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" />Maybe</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option3" />No</label>
</div>
If you want to avoid these css classes you can only use jQuery:
如果你想避免这些 css 类，你只能使用 jQuery：
$('.btn-group').each(function(index, item) {
$(item).find('.btn').css(
'width', 100 / $(item).find('.btn').length + '%'
)
});
回答by max kaplan
For boostrap 4 the docs say you can do this:
对于 boostrap 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。
回答by Feeco
Another solution:
另一种解决方案：
.btn-group {
display: flex;
flex-direction: row;
}
.btn-group > button {
width: 100%;
}
回答by ZerosAndOnes
If @Schmalzy's solution doesn't work then you might be using Bootstrap v3.0.0, for which add the following styles in addition to the html markup in @Schmalzy's solution.
如果@Schmalzy 的解决方案不起作用，那么您可能正在使用 Bootstrap v3.0.0，除了 @Schmalzy 的解决方案中的 html 标记外，还为此添加以下样式。
.btn-group-justified > .btn-group .btn {
width: 100%;
}
.btn-group-justified > .btn, .btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
回答by Valerie
You can just add a class of your own and give them a 33% width (for the 3 buttons) or 50% width (for the 2 buttons).
您可以添加自己的类，并为它们提供 33% 的宽度（对于 3 个按钮）或 50% 的宽度（对于 2 个按钮）。
