无法对齐 Bootstrap 中详细信息页面的静态字段答案

【问题标题】：Cannot align static fields for Details page in Bootstrap无法对齐 Bootstrap 中详细信息页面的静态字段
【发布时间】：2017-01-14 19:36:23
【问题描述】：

我想在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>

【问题讨论】：

DisplayFor() 不接受 html 属性（它甚至不输出 <p> 元素 - 只是文本） - <p class="form-control-static">@Html.DisplayFor(m => m.Name)</p>
我应该在 razor 中做什么而不是 DisplayFor() 来解决这个问题？
当然应该是强类型的，这样我就可以使用model.Name等...
我试过但没有任何意义（文本只是以 1 px 的形式出现在下面）。还有其他想法吗？
据我所知，问题似乎与“col-md-9”等其他元素或类有关。因为我在使用时看到相同的结果
email@example.com
.

标签： css asp.net-mvc twitter-bootstrap twitter-bootstrap-3 metronic

【解决方案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>

【讨论】：

【解决方案2】：

这是解决问题的最终解决方案。非常感谢您的所有帮助...

<style>
    .col-sm-3 .control-label {
        float: right !important;
        margin-top: 0 !important;
    }

    /*Add colon ( : ) to the end of labels */
    .col-sm-3 > label:after {
        content: " :";
    }
</style>

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

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

【讨论】：

这很 hacky，我建议找出引导类不起作用的原因，可能是因为引导表单中没有表单组