- 首页
- 其他开发
- Bootstrap 3:表单水平是否适用于带有控制标签的单选按钮?
Bootstrap 3:表单水平是否适用于带有控制标签的单选按钮?
[英] Bootstrap 3: does form-horizontal work for radio buttons with a control-label?
本文介绍了Bootstrap 3:表单水平是否适用于带有控制标签的单选按钮?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这浪费了我一天中的几个小时.这是一个非常简单的表单，带有 2 个单选按钮和一个标签，位于
<div class="radio"><标签><input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">无线电 0
<div class="radio"><标签><input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">无线电 0
</fieldset></表单>
如果你想在不使用列类的情况下在同一行上显示单选框、复选框或其他表单元素，表单的类是 .form-inline:
http://bootply.com/102908
<!--form-group--></表单>
This has wasted several hours of my day. Here's a very simple form, with 2 radio buttons and a label, on bootply. This works as expected on 2.3.2: 'Date Range' on the left, buttons on the right. On Bootstrap 3, everything's out, it's basically vertical instead of horizontal, the text is bold, and it's just a mess. Any ideas, short of re-doing this as a grid?
Thanks.
EDIT
This is the expected layout, when B2.3.2 is selected on bootply:
This is what I get when I select any B3+:
解决方案
To do what you want to do, you do have to use col-* classes as all form elements are 100% width, so you have to have a col-* to fix the width you want. You can use col-xs-* and it will be for all sizes, not responsive:
EXAMPLE: http://bootply.com/102912
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-xs-3 control-label">Date Range</label>
<div class="col-xs-9">
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Radio 0</label>
</div>
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Radio 0</label>
</div>
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Radio 0</label>
</div>
</div>
</div>
</fieldset>
</form>
If you want radios, checkboxes, or other form elements on the same line without the use of column classes, the class for the form is .form-inline:
http://bootply.com/102908
<form class="form-inline">
<div class="form-group">
<label class="radio-inline">Date Range</label>
<label class="radio-inline">
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Radio 0</label>
<label class="radio-inline">
<input id="inlineradio2" name="sampleinlineradio" value="option2" type="radio">
Radio 2</label>
<label class="radio-inline">
<input id="inlineradio3" name="sampleinlineradio" value="option3" type="radio">
Radio 3</label>
</div>
<!--form-group-->
</form>
这篇关于Bootstrap 3:表单水平是否适用于带有控制标签的单选按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
