css - 无法在 Bootstrap 中对齐详细信息页面的静态字段

Question

我想使用标签作为 that 上使用的“静态控制”标签页。然而，尽管我使用相同的 Bootstrap 版本，但我无法像那样对齐我的表单控件(我希望标签是右浮动，数据字段是左浮动 - 并排 - 并且它们之间有一个“:”符号。Howwver，结果如下图所示。能否请您看一下我的代码并告知哪里出了问题？

该页面上的代码:

<div class="form-group">
    <label class="col-md-3 control-label">Static Control</label>
    <div class="col-md-9">
        <p class="form-control-static"> email@example.com </p>
    </div>
</div>

我在 Razor 页面上使用的代码:

<div class="form-group">
     @Html.LabelFor(m => m.Name, new { @class = "col-md-3 control-label" }):
     <div class="col-md-9">
         @Html.DisplayFor(m => m.Name, new { @class = "form-control-static" })
     </div>
</div>
<br />
<div class="form-group">
     @Html.LabelFor(m => m.Surname, new { @class = "col-md-3 control-label" }):
     <div class="col-md-9">
         @Html.DisplayFor(m => m.Surname, new { @class = "form-control-static" })
     </div>
</div>

Answer 1

你有两个元素，它们等于 100% 宽度加上冒号，所以它将值向下推了一行。您只需要对标签进行编码，而不是使用 HtmlHelper 来添加冒号。将其更改为:

<div class="form-group">
   <label class="col-md-3 control-label">@Model.Name:</label>
   <div class="col-md-9">
     @Html.DisplayFor(m => m.Name, new { @class = "form-control-static" })
   </div>
</div>