MVC - bootstrap -form 控件与 form-group 一起出现在下一行

Question

我想使用引导表单组。如果我有一个标签和一个控件，它可以工作，但如果有超过 2 个控件（标签、控件和验证字段），则验证字段进入下一行。

我尝试使用 form-inline 但没有运气。谁能告诉我如何将 form-group 的所有元素放在一行中？

        <div class="form-group">
            @Html.Label("Emp ID", new { @class = "col-sm-2 control-label" })
            <div class="col-sm-10">
                @Html.TextBoxFor(model => model.EmpID, new { disabled = "disabled", @class = "form-control" })
            </div>
        </div>

        @* Tried with form-group *@
        <div class="form-group">
            @Html.LabelFor(model => model.EmployementTypeID, Constants.EmploymentType, new { @class = "col-sm-2 control-label" })
            <div>
                @Html.DropDownListFor(model => model.EmployementTypeID, new SelectList(Model.EmploymentType, "EmployementTypeID", "EmployementTypeName", Model.EmployementTypeID), new { @class = "form-control" })
              @* This validation goes in next line, how can we keep it in the same line *@
                @Html.ValidationMessageFor(model => model.EmployementTypeID)
            </div>
        </div>

        @* Tried with form-inline *@
        <div class="form-inline">
            @Html.LabelFor(model => model.Address, Constants.Address, new { @class = "col-sm-2 control-label" })
            <div>
                @Html.TextAreaFor(model => model.Address, new { @class = "form-control col-sm-10" })
           @* This validation goes in next line, how can we keep it in the same line *@
                @Html.ValidationMessageFor(model => model.Address)
            </div>
        </div>

Answer 1

尝试将您的 class="col-sm-10" 添加到您的所有 div 中。

像这样：

<div class="form-group">
    @Html.LabelFor(model => model.EmployementTypeID, Constants.EmploymentType, new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10">
        @Html.DropDownListFor(model => model.EmployementTypeID, new SelectList(Model.EmploymentType, "EmployementTypeID", "EmployementTypeName", Model.EmployementTypeID), new { @class = "form-control" })                  
        @Html.ValidationMessageFor(model => model.EmployementTypeID)
    </div>
</div>