css - Bootstrap 3 btn组宽度

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>

这给了我很好的类似 radio 的按钮:

但如您所见，它们的宽度是固定的。这可以用 Bootstrap 类修复吗？ 同样，这是我的示例代码:http://jsfiddle.net/Misiu/yy5HZ/5/

Answer 1

使用内置的 .btn-group-justified类别: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.

anchor :

<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