Bootstrap不适当的表格格式

Question

我将Bootstrap表单类从form-horizontal更改为form-inline，并且所有格式都受到干扰。如何获得正确的内联格式？

之前

内联后

这是第一个表格字段的示例代码

<div class="form-horizontal">

    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        <label class="control-label col-md-2" for="Med_Name">Medicine Name</label>
        <div class="col-md-10">
            @Html.EditorFor(model => model.Med_Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Med_Name, "", new { @class = "text-danger" })
        </div>
    </div>
    @* Rest Of The HTML Code Is Not Shown *@

Answer 1

当您将样式设置为inline时，您还需要将其包装在各自的UI模式中，然后在textboxes中包装前3 col-md-4，然后将所有这3个textboxes包裹起来在col-md-12中作为他们的父级..或者您甚至可以尝试将其包含在row元素中，每个3 textboxes或根据您的要求。

<强>实施例

<div class="col-md-12"> <!--Even row instead of col-md-12-->
    <div class="form-group col-md-4"> <!--col-md-4 for other elements too-->
        <label class="control-label col-md-2" for="Med_Name">Trade Price</label>
        <div class="col-md-10">
            @Html.EditorFor(model => model.Med_Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Med_Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <!--Same goes for other 2 elements-->
</div>
<div class="col-md-12"> <!--Even row instead of col-md-12-->
    <div class="form-group col-md-4">
        <label class="control-label col-md-2" for="Med_Name">Medicine Name</label>
        <div class="col-md-10">
            @Html.EditorFor(model => model.Med_Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Med_Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <!--Same goes for other 2 elements-->
</div>