css – Bootstrap 3 btn-group width

我有另一个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/

解决方法

使用内置的.btn-group对齐类： 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>

纽扣：

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