设置一个按钮组的宽度为100% ,并使按钮等宽?

我正在使用 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%;
}
148491 次浏览

BOOTSTRP 2 (来源)

问题是按钮上没有设置宽度。试试这个:

.btn {width:20%;}

编辑:

默认情况下,按钮采取自动宽度的文本长度加上一些填充,所以我猜对于你的例子,它可能更像是14.5% 的5个按钮(以补偿填充)。

注:

如果你不想尝试和补偿填充,你可以使用 box-sizing:border-box;

Http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

我不喜欢设置宽度的解决方案。Btn 是因为它假设。Btn-group.这是一个错误的假设,会导致臃肿的、特定于表示的 CSS。

更好的解决办法是改变方式。与。。。组。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。Btn-block 和 child。显示 btn (s)。我相信这就是你要找的:

.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/

Bootstrap 具有 .btn-group-justified css 类。

它的结构取决于您使用的标记类型。

带有 <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类就可以做到这一点。

您必须将其添加到父元素中,然后用。像这样的组合

    <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>

角形 < em >-等宽按钮组

假设您的作用域中有一个“事物”数组..。

  • 确保父 div 的宽度为100% 。
  • 使用 重复在按钮组中创建按钮。
  • 使用 很有型计算每个按钮的宽度。

<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>

鞋带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>

对于 引导程序4,只需添加以下类:

w-100

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>

通过向 btn-group容器添加 w-100类,基本上可以告诉 btn-group容器的宽度为100% 。里面的按钮会自动填满整个空间。

引导程序4删除。 btn-group 对齐。作为替换,您可以使用 <div class="btn-group d-flex" role="group"></div>作为包装元素的.w-100。

试试这个:

<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>