在引导程序中用单选按钮排列标签

Question

我有一个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它,因为它创建了一些时髦的边距,与我在那里的其他东西不相符.

Answer 1

如果将"radio inline"类添加到user1938475提供的解决方案中的控件标签,则它应与其他标签正确对齐.或者,如果你只是像第二个例子一样使用"无线电",那么只需要包含"无线电"课程.

<label class="radio control-label">Some label</label>

或''无线电内联'

<label class="radio-inline control-label">Some label</label>

Answer 2

从Bootstrap 3开始,您必须在标签上使用checkbox-inline和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>

Answer 3

这可能对你有用,请试试这个.

<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>

Answer 4

这一切都很好地排列在外,包括现场标签.排除现场标签是棘手的部分.

HTML代码:

<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>

CSHTML/Razor代码:

<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>