61

我有一个带有一些内联单选按钮和标签的 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它，因为它会产生与我在其中的其他东西不匹配的时髦边距。

4

7 回答 7

61

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

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

或“无线电内联”

<label class="radio-inline control-label">Some label</label>
于 2013-05-01T22:37:35.493 回答
43

从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>
于 2014-09-16T04:16:44.677 回答
32

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

<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>
于 2013-02-18T05:00:07.140 回答
10

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

在此处输入图像描述

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>
于 2017-07-31T13:37:58.170 回答
1

在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>
于 2020-02-27T10:46:28.093 回答
0

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

.radio-inline+.radio-inline {
    margin-left: 5px;
}
于 2015-03-16T14:48:13.783 回答
0

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

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

于 2019-03-13T02:13:24.857 回答