74

我正在使用 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%;
}
4

10 回答 10

156

Bootstrap 有.btn-group-justifiedcss 类。

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

带<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>
于 2014-02-27T22:10:16.457 回答
42

类不需要额外的 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-05-10T15:14:11.090 回答
23

引导程序 2（来源）

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

.btn {width:20%;}

编辑：

默认情况下，按钮采用其文本长度的自动宽度加上一些填充，因此我猜对于您的示例，5 个按钮可能更像 14.5%（以补偿填充）。

笔记：

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

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

于 2013-01-07T22:26:46.057 回答
12

我不喜欢 .btn 上设置宽度的解决方案，因为它假定 .btn 组中的项目数量总是相同的。这是一个错误的假设，会导致臃肿的、特定于表示的 CSS。

更好的解决方案是更改 .btn-group 与 .btn-block 和子 .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/

于 2014-02-18T09:16:06.730 回答
10

对于引导程序 4，只需添加此类：

w-100

于 2018-03-04T00:51:19.263 回答
4

Bootstrap 4 删除了 .btn-group-justified。作为替代，您可以使用<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>
于 2020-02-27T17:54:46.670 回答
2

Angular - 等宽按钮组

假设您的范围内有一系列“事物”......

  • 确保父 div 的宽度为 100%。
  • 使用ng-repeat在按钮组中创建按钮。
  • 使用ng-style计算每个按钮的宽度。
<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>
于 2016-06-02T22:57:46.550 回答
0 

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

于 2016-07-21T07:38:08.723 回答
0

引导程序 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>
于 2017-02-07T12:12:38.647 回答
0

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容器具有 100% 的宽度。w-100里面的按钮会自动填充整个空间。

于 2019-09-03T10:41:56.313 回答