布局中的 Html 元素意外行为

Question

我对某些 html 元素的布局有疑问。我有一个表格，我将其更改为选项卡式显示，以便将其拆分并使其更可用。现有表单如下所示：

但是，当我在选项卡内使用相同的代码时，结果如下：

正如我所说，它的代码与以下完全相同：

       <div class="col-md-12" style="display:block;">
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Receiver, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CommunicationModel.Communication.Receiver, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Receiver, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Department.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DisplayFor(model => model.CommunicationModel.Communication.Department.Name)
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.DepartmentId, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.DateOpened, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <span id="custSpan" style="font-size:14px;">
                        @Html.DisplayFor(model => model.CommunicationModel.Communication.DateOpened)
                        @Html.HiddenFor(model => model.CommunicationModel.Communication.DateOpened)
                    </span>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Method, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EnumDropDownListFor(model => model.CommunicationModel.Communication.Method, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Method, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Product, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CommunicationModel.Communication.Product, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Product, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.PartNo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CommunicationModel.Communication.PartNo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.PartNo, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CommunicationModel.Communication.Description, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Description, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CommunicationModel.Communication.Severity.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.CommunicationModel.Communication.SeverityId, new SelectList(Model.AllSeverities, "Id", "DisplayName"), new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>
        </div>      

似乎是某些元素影响了布局。到目前为止，我在 Html.DisplayFor() 和 Html.EnumDropDownListFor() （标准 DropDownListFor() 的扩展）上都注意到了它。由于某种原因，它似乎缩进了下一行的元素。

有人可以帮忙吗？

非常感谢:)

Answer 1

试试这个，

<div class="col-md-12" style="display:block;">
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Receiver, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommunicationModel.Communication.Receiver, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Receiver, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Department.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DisplayFor(model => model.CommunicationModel.Communication.Department.Name)
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.DepartmentId, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.DateOpened, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <span id="custSpan" style="font-size:14px;">
                    @Html.DisplayFor(model => model.CommunicationModel.Communication.DateOpened)
                    @Html.HiddenFor(model => model.CommunicationModel.Communication.DateOpened)
                </span>
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Method, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EnumDropDownListFor(model => model.CommunicationModel.Communication.Method, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Method, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Product, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommunicationModel.Communication.Product, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Product, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.PartNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommunicationModel.Communication.PartNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.PartNo, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CommunicationModel.Communication.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Description, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Severity.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.CommunicationModel.Communication.SeverityId, new SelectList(Model.AllSeverities, "Id", "DisplayName"), new { @class = "form-control" })
            </div>
        </div>
    </div>      
</div>