我对某些 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() 的扩展）上都注意到了它。由于某种原因，它似乎在下一行缩进了元素。
有人可以帮忙吗？
非常感谢 ：）