css - 无法使用 Bootstrap 3 在 MVC Razor View 中应用控件对齐

Question

问题陈述:

在我的编辑 View 之一中，我想禁用文本框，因此为此我使用 DisplayFor 而不是 TextboxFor。但是当我使用 Displayfor 时，对齐方式不正确。您可以查看所附图片以供引用。我正在使用 Bootstrap CSS 3.0

如有任何帮助，我们将不胜感激。我应该使用什么内联 CSS 来正确对齐？？

Image1:在此图中，您可以看到 Acquire Status ID 标签和 Textboxfor 正确对齐。

Image2:当我使用 DisplayFor 而不是 Textboxfor 时，Acquire Status ID 标签和 Displayfor 没有正确对齐。

查看:

<div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.AcquirestatusID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DisplayFor(model => model.AcquirestatusID,new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.AcquirestatusID)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>

Answer 1

我使用 Textboxfor 的只读属性解决了我的问题。

 @Html.TextBoxFor(model => model.AccessoriesID,new { @class = "form-control",@readonly="readonly" })

应用以上代码行后，我的编辑 View 如下所示: