无法在Bootstrap

Question

我想使用标签＆＃34; Static Control＆＃34; that页面上的标签。然而，虽然我使用相同的Bootstrap版本，但是我无法像我那样对齐我的表单控件（我希望标签是正确的浮点数，数据字段是浮动并排的 - 并且有一个＆＃34;：＆＃34;在他们之间签名。如何，结果如下图所示。你能看看我的代码并告知错误吗？

该页面上的代码：

<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>

Answer 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 />