将按钮组的宽度设置为100%并使按钮宽度相等？

Question

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

Answer 1

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>

Answer 2

这个.btn-group-justified课程不需要额外的css .

你必须将它添加到父元素,然后将每个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>

Answer 3

BOOTSTRAP 2(来源)

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

.btn {width:20%;}

编辑:

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

注意:

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

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

Answer 4

我不喜欢.btn上设置宽度的解决方案,因为它假设.btn-group中的项目总数相同.这是一个错误的假设,并导致臃肿,特定于演示文稿的CSS.

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

Answer 5

对于bootstrap 4,只需添加此类:

w-100

Answer 6

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>