设置button组的宽度为100％，并使button等宽？
我正在使用Bootstrap，我想设置一个完整的btn-group ，其宽度为其父元素的100％。 我也喜欢内部button采取相同的宽度。 事实上，我也做不到。
我在这里做了一个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%; }
BOOTSTRAP 2 （ 来源 ）
问题是在button上没有设置宽度。 尝试这个：
.btn {width:20%;}
编辑：
默认情况下，button的文本长度加上一些填充的自动宽度，所以我想你的例子可能更像是5个button的14.5％（以弥补填充）。
注意：
如果你不想尝试和补偿填充，你可以使用box-sizing:border-box;
Bootstrap有.btn-group-justified css类。
它的结构是基于你使用的标签的types。
用<a>标签
<div class="btn-group btn-group-justified" role="group" aria-label="..."> ... </div>
用<button>标签
<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>
没有必要额外的css .btn-group-justified类来做到这一点。
你必须把这个添加到父元素中，然后用.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>
我不喜欢在.btn上设置宽度的解决scheme，因为它假定在.btn-group中总是有相同数量的项目。 这是一个错误的假设，并导致臃肿，特定于演示文稿的CSS。
更好的解决scheme是改变.btn-group与.btn-block和child.btn（s）的显示方式。 我相信这是你要找的东西：
.btn-group.btn-block { display: table; } .btn-group.btn-block > .btn { display: table-cell; }
这是一个小提琴： http : //jsfiddle.net/DEwX8/
angular度 – 等宽button组
假设你在范围内有一系列'东西'…
- 确保父div具有100％的宽度。
- 使用ng-repeat在button组内创buildbutton。
- 使用ng-style来计算每个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>
<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>
Bootstrap 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>
