Bootstrap内联样式

Question

我正在尝试使用bootstrap显示一系列内联元素，如下图所示：

将“form-control”类添加到输入后，它会移动到其他元素下方。我尝试了几种不同的组合，无法提出正确的类和样式集。

html如下：

<div class="row">
    <div class="form-group col-xs-12 col-md-5 col-lg-6">
        <label class="control-label">
            Unique ID @Model.Ordering:
            <input class="form-control" type="number" required />
        </label>
        <strong>Name:</strong> @Model.Name
        <strong>DOB:</strong> @Model.DateOfBirth
        <strong>Gender: </strong>@Model.Gender
    </div>
</div>

这是我现在正常运行的更新代码。

<div class="row">
    <div class="form-group form-inline">
        <div class="form-group">
            <label class="control-label">
                Unique ID @Model.Ordering:
            </label>
        </div>
        <div class="form-group">
            <input class="form-control" type="number" />
        </div>
        <div class="form-group">
            <strong>Name:</strong> @Model.Name
        </div>
        <div class="form-group">
            <strong>DOB:</strong> @Model.DateOfBirth
        </div>
        <div class="form-group">
            <strong>Gender: </strong>@Model.Gender
        </div>
    </div>
 </div>

Answer 1

看起来你正在寻找bootstrap的inline form class。您是否已将form添加到{{1}}代码？

Answer 2

您正在寻找<form class="form-inline"> inline documentation