我还有另一个与 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>
这给了我很好的类似单选按钮:
但正如你所看到的,它们具有固定的宽度。可以通过引导类来解决这个问题吗?
这是我的示例代码:http://jsfiddle.net/Misiu/yy5HZ/5/ http://jsfiddle.net/Misiu/yy5HZ/5/
使用内置的.btn-group-justified
class: 官方文档 http://getbootstrap.com/components/#btn-groups-justified
使一组按钮以相等的尺寸拉伸以覆盖整个
其父级的宽度。也适用于按钮下拉菜单
按钮组。
Anchors:
<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>
Buttons:
使用合理的按钮组<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 http://jsfiddle.net/EZ2f7/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)