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

Lining up labels with radio buttons in bootstrap

提问by

I have a Bootstrap form with some inline radio buttons and a label. I'd like to keep the label on the same line as the buttons, but I can't seem to make that happen. Here's my approach:

我有一个带有一些内联单选按钮和标签的 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>

Fiddle: http://jsfiddle.net/GaDbZ/2/

小提琴：http: //jsfiddle.net/GaDbZ/2/

I also tried this:

我也试过这个：

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

But everything is smooshed together. Fiddle: http://jsfiddle.net/GaDbZ/3/

但一切都融为一体。小提琴：http: //jsfiddle.net/GaDbZ/3/

How can I get the horizontal spacing from the first one combined with the vertical spacing of the second?

如何将第一个的水平间距与第二个的垂直间距相结合？

Also, I should note that in real life, I have a bunch of other stuff going on in the form, so I don't want to use form-horizontalbecause it creates funky margins that don't jive with the other stuff I have in there.

另外，我应该注意，在现实生活中，我在表单中有很多其他东西，所以我不想使用form-horizontal它，因为它会产生时髦的边距，与我在那里的其他东西不协调。

采纳答案by etreworgy

If you add the 'radio inline' class to the control label in the solution provided by user1938475 it should line up correctly with the other labels. Or if you're only using 'radio' like your 2nd example just include the 'radio' class.

如果在 user1938475 提供的解决方案中将“radio inline”类添加到控件标签，它应该与其他标签正确对齐。或者，如果您像第二个示例一样仅使用“radio”，则只需包含“radio”类。

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

OR for 'radio inline'

或用于“无线电内联”

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

回答by Jens

Since Bootstrap 3you have to use checkbox-inline and radio-inlineclasses on the label.

从Bootstrap 3 开始，您必须在标签上使用checkbox-inline 和 radio-inline类。

This takes care of vertical alignment.

这负责垂直对齐。

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

回答by RMDS

This may work for you, Please try this.

这可能对你有用，请试试这个。

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

回答by Jess

This is all nicely lined up includingthe field label. Lining up the field label was the tricky part.

这一切都很好地排列起来，包括字段标签。排列字段标签是棘手的部分。

HTML Code:

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

CSHTML/剃刀代码：

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

回答by misraavi

Best is to just Apply margin-top: 2pxon the input element.

最好是margin-top: 2px在输入元素上应用。

Bootstrap adds a margin-top: 4pxto input element causing radio button to move down than the content.

Bootstrap 添加了一个margin-top: 4pxto input 元素，导致单选按钮比内容向下移动。

回答by phn

In Bootstrap 4you can use the form-check-inlineclass.

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

回答by Simon H

Key insights for me were: - ensure that label content comes afterthe input-radio field - I tweaked my css to make everything a little closer

对我的主要见解是： - 确保标签内容出现在input-radio 字段之后 - 我调整了我的 css 以使一切更接近

.radio-inline+.radio-inline {
    margin-left: 5px;
}