我有一个Bootstrap表单,带有一些内联单选按钮和一个标签。我想将标签与按钮保持在同一条线上,但我似乎无法实现这一点。这是我的方法:
<form>
<div class="control-group">
<label class="control-label">Some label</label>
<div class="controls">
<label class="radio inline">
<input type="radio" value="1"/>
First
</label>
<label class="radio inline">
<input type="radio" value="2"/>
Second
</label>
</div>
</div>
</form>
小提琴:http://jsfiddle.net/GaDbZ/2/
我也试过这个:
<form>
<div class="form-inline">
<label class="control-label">Some label</label>
<label class="radio">
<input type="radio" value="1"/>
First
</label>
<label class="radio">
<input type="radio" value="2"/>
Second
</label>
</div>
</form>
但是一切都在一起被吹走了。小提琴:http://jsfiddle.net/GaDbZ/3/
如何获得第一个的水平间距和第二个的垂直间距?
另外,我应该注意到,在现实生活中,我在表单中还有其他一些东西,所以我不想使用form-horizontal
,因为它创建了一些不与jive搭配的时髦边距我在那里的其他东西。
答案 0 :(得分:52)
如果您将“radio inline”类添加到user1938475提供的解决方案中的控件标签,则它应与其他标签正确对齐。或者,如果你只是像第二个例子一样使用“无线电”,那么只需要包含“无线电”课程。
<label class="radio control-label">Some label</label>
或者'无线电内联'
<label class="radio-inline control-label">Some label</label>
答案 1 :(得分:39)
由于 Bootstrap 3 ,您必须在标签上使用checkbox-inline and radio-inline类。
这需要垂直对齐。
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
答案 2 :(得分:30)
这可能对你有用,请试试这个。
<form>
<div class="form-inline">
<div class="controls-row">
<label class="control-label">Some label</label>
<label class="radio inline">
<input type="radio" value="1" />First
</label>
<label class="radio inline">
<input type="radio" value="2" />Second
</label>
</div>
</div>
</form>
答案 3 :(得分:9)
这一切都很好地排列包括字段标签。排除现场标签是棘手的部分。
<div class="form-group">
<label class="control-label col-md-5">Create a</label>
<div class="col-md-7">
<label class="radio-inline control-label">
<input checked="checked" id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="2"> Task
</label>
<label class="radio-inline control-label">
<input id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="1"> Note
</label>
</div>
</div>
<div class="form-group">
@Html.Label("Create a", htmlAttributes: new { @class = "control-label col-md-5" })
<div class="col-md-7">
<label class="radio-inline control-label">
@Html.RadioButtonFor(model => model.TaskTypeId, Model.TaskTaskTypeId) Task
</label>
<label class="radio-inline control-label">
@Html.RadioButtonFor(model => model.TaskTypeId, Model.NoteTaskTypeId) Note
</label>
</div>
</div>
答案 4 :(得分:0)
我的主要见解是: - 确保输入无线电字段后标签内容 - 我调整了我的CSS以使一切更接近
.radio-inline+.radio-inline {
margin-left: 5px;
}
答案 5 :(得分:0)
最好将margin-top: 2px
应用于输入元素。
Bootstrap向输入元素添加margin-top: 4px
,使单选按钮比内容向下移动。
答案 6 :(得分:0)
在 Bootstrap 4 中,您可以使用form-check-inline类。
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option1" value="1">
<label class="form-check-label" for="option1">First</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option2" value="2">
<label class="form-check-label" for="option2">Second</label>
</div>