Bootstrap 3 btn-group width [英] Bootstrap 3 btn-group width

问题描述

我有另一个Bootstrap相关的问题。
我想添加收音机和复选框到我的表单，我想他们也采取100％宽度的表单元素。

I have another Bootstrap related problem. I want to add radio and checkboxes to my form, I would like them also to take 100% width of form element.

我添加了按钮组如下：

<div class="form-group">
    <label class="col-sm-3 control-label">Subscribe</label>
    <div class="col-sm-9">
        <div class="btn-group input-group" data-toggle="buttons">
            <label class="btn btn-success">
                <input type="radio" name="options" id="option1" />Yes</label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option2" />Maybe</label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option3" />No</label>
        </div>
    </div>
</div>

这给我很好的类似电台的按钮：

This gives me nice radio-like buttons:

但是你可以看到他们有固定宽度。这可以用bootstrap类固定吗？
下面是我的示例代码： http://jsfiddle.net/Misiu/yy5HZ/ 5 /

But as You can see they have fixed width. Can this be fixed with bootstrap classes? Again here is my sample code: http://jsfiddle.net/Misiu/yy5HZ/5/

推荐答案

使用内置的 .btn-group-justified class：官方文档

Use the built in .btn-group-justified class: Offical Docs

使一组按钮伸展到相同的大小，以跨越其父对象的整个
宽度。也可以在
按钮组中使用按钮下拉菜单。

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

锚点：

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group"> 
    <a href="#" class="btn btn-default" role="button">Left</a>
    <a href="#" class="btn btn-default" role="button">Middle</a>
    <a href="#" class="btn btn-default" role="button">Right</a> 
</div>

按钮：

要使用< button> 元素的合理按钮组，必须换行
按钮组中的每个按钮。大多数浏览器没有正确应用我们的
CSS为< button> 元素，但由于我们支持
按钮下拉菜单，我们可以解决

To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can work around that.

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
  <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>

JSFiddle

这篇关于Bootstrap 3 btn-group width的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！