CSS 将按钮组的宽度设置为 100% 并使按钮等宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14205125/
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
Set a button group's width to 100% and make buttons equal width?
提问by Richard
I'm using Bootstrap, and I'd like to set an entire btn-groupto have a width of 100% of its parent element. I'd also like the inner buttons to take equal widths. As it is, I can't achieve either.
我正在使用 Bootstrap，我想将整个btn-group元素设置为其父元素的 100% 的宽度。我还希望内部按钮具有相同的宽度。事实上，我也无法实现。
I've made a JSFiddle here: http://jsfiddle.net/BcQZR/12/
我在这里做了一个 JSFiddle：http: //jsfiddle.net/BcQZR/12/
Here is the HTML:
这是 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>
And here is my current CSS, which doesn't work:
这是我当前的 CSS，它不起作用：
#colours {
width: 100%;
}
采纳答案by Kris Hollenbeck
BOOTSTRAP 2(source)
引导程序 2（源代码）
The problem is that there is no width set on the buttons. Try this:
问题是按钮上没有设置宽度。尝试这个：
.btn {width:20%;}
EDIT:
编辑：
By default the buttons take an auto width of its text length plus some padding, so I guess for your example it is probably more like 14.5% for 5 buttons (to compensate for the padding).
默认情况下，按钮采用其文本长度的自动宽度加上一些填充，所以我想对于您的示例，5 个按钮可能更像是 14.5%（以补偿填充）。
Note:
笔记：
If you don't want to try and compensate for padding you can use box-sizing:border-box;
如果您不想尝试补偿填充，您可以使用 box-sizing:border-box;
回答by Sam Axe
Bootstrap has the .btn-group-justifiedcss class.
Bootstrap 有.btn-group-justifiedcss 类。
How it's structured is based on the type of tags you use.
它的结构取决于您使用的标签类型。
<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>
回答by Simon Katan
There's no need for extra css the .btn-group-justifiedclass does this.
这个.btn-group-justified类不需要额外的 css 。
You have to add this to the parent element and then wrap each btn element in a div with .btn-group like this
您必须将其添加到父元素，然后使用 .btn-group 将每个 btn 元素包装在一个 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>
回答by OregonJeff
I don't like the solution of settings widths on .btn because it assumes there'll always be the same number of items in the .btn-group. This is a faulty assumption and leads to bloated, presentation-specific CSS.
我不喜欢 .btn 上设置宽度的解决方案，因为它假设 .btn-group 中的项目数量总是相同的。这是一个错误的假设，会导致臃肿的、特定于表示的 CSS。
A better solution is to change how .btn-group with .btn-block and child .btn(s) are display. I believe this is what you're looking for:
更好的解决方案是更改 .btn-group 与 .btn-block 和 child .btn(s) 的显示方式。我相信这就是你要找的：
.btn-group.btn-block {
display: table;
}
.btn-group.btn-block > .btn {
display: table-cell;
}
Here's a fiddle: http://jsfiddle.net/DEwX8/123/
这是一个小提琴：http: //jsfiddle.net/DEwX8/123/
If you'd prefer to have equal-width buttons (within reason) and can support only browsers that support flexbox, try this instead:
如果您更喜欢等宽按钮（在合理范围内）并且只能支持支持 flexbox 的浏览器，请尝试以下方法：
.btn-group.btn-block {
display: flex;
}
.btn-group.btn-block > .btn {
flex: 1;
}
Here's a fiddle: http://jsfiddle.net/DEwX8/124/
这是一个小提琴：http: //jsfiddle.net/DEwX8/124/
回答by Leandro
For bootstrap 4just add this class:
对于引导程序 4，只需添加此类：
w-100
w-100
回答by tdahman1325
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.
Bootstrap 4 删除了 .btn-group-justified。作为替代，您可以使用<div class="btn-group d-flex" role="group"></div>.w-100 作为元素的包装器。
Try this:
尝试这个：
<div class="btn-group d-flex" role="group>
<button type="button" class="btn btn-primary w-100">Submit</button>
<button type="button" class="btn btn-primary w-100">Cancel</button>
</div>
回答by Derek Soike
Angular- equal width button group
Angular - 等宽按钮组
Assuming you have an array of 'things' in your scope...
假设您的范围内有一系列“事物”......
- Make sure the parent div has a width of 100%.
- Use ng-repeatto create the buttons within the button group.
- Use ng-styleto calculate the width for each button.
<div class="btn-group"
style="width: 100%;">
<button ng-repeat="thing in things"
class="btn btn-default"
ng-style="{width: (100/things.length)+'%'}">
{{thing}}
</button>
</div>
回答by PPB
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-block">
<button type="button" data-toggle="dropdown" class="btn btn-default btn-xs btn-block dropdown-toggle">Actions <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span></button><ul role="menu" class="dropdown-menu"><li><a href="#">Action one</a></li><li class="divider"></li><li><a href="#" >Action Two</a></li></ul></div>回答by Yianni
Bootstrap 4
引导程序 4
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
回答by lokers
Bootstrap 4 Solution
Bootstrap 4 解决方案
<div class="btn-group w-100">
<button type="button" class="btn">One</button>
<button type="button" class="btn">Two</button>
<button type="button" class="btn">Three</button>
</div>
You basically tell the btn-groupcontainer to have width 100% by adding w-100class to it. The buttons inside will fill in the whole space automatically.
您基本上btn-group通过向容器添加w-100类来告诉容器宽度为 100% 。里面的按钮会自动填满整个空间。
