Bootstrap 3 btn-group width

Question

我有另一个与Bootstrap相关的问题.我想在我的表单中添加收音机和复选框,我希望它们也可以采用100%宽度的表单元素.

我添加了按钮组,如下所示:

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

这给了我很好的收音机按钮:

但正如你可以看到他们有固定的宽度.这可以用bootstrap类修复吗？这里是我的示例代码:http://jsfiddle.net/Misiu/yy5HZ/5/

Answer 1

使用内置.btn-group-justified类:官方文档

使一组按钮以相同的大小拉伸,以跨越其父级的整个宽度.也适用于按钮组中的按钮下拉菜单.

锚:

<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>元素,但由于我们支持按钮下拉,我们可以解决这个问题.

<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