ASP MVC 5 和 Bootstrap 中的表单控件对齐不正确答案

【问题标题】：Incorrect aligning of form controls in ASP MVC 5 and BootstrapASP MVC 5 和 Bootstrap 中的表单控件对齐不正确
【发布时间】：2015-06-05 22:56:02
【问题描述】：

我一直在为此寻找解决方案，但到目前为止还没有找到任何解决方案，这让我发疯了。

首先，我是 Web 开发的新手，使用过 ASP MVC、Bootstrap、Ajax、Javascript 等，如果这里有一些糟糕的代码，请见谅。

我们来回答问题：

我有一个带有 ASP MVC 5 和 Bootstrap 的项目，其中包含一些表单。问题是，使用“表单水平”类，我无法很好地对齐控件，表单组的一个控件与另一个控件对齐，但右侧的控件有点“上调”。最好显示它：

如您所见，这是使用 Visual Studio 的默认项目完成的。也许不好的对齐在文本框中没有很好地显示，但在 Field3 的 ValueFor 中非常清楚。

这是用于该表单的代码。很简单：

@model PruebaAuth3.Models.PruebaFormViewModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
 }

<body>
    <br />
    <div class="panel panel-primary">
    <div class="panel-heading">Panel title</div>
    <div class="panel-body">
        @using (Html.BeginForm("SubmitForm", "PruebaForm", FormMethod.Post))
        {
                <div class="form-horizontal">
                    @Html.HiddenFor(model => model.Id)
                    <div class="form-group">
                        <div class="control-label col-md-2"><b>@Html.LabelFor(model => model.Field1)</b></div>
                        <div class="col-md-10">
                        @Html.EditorFor(model => model.Field1)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="control-label col-md-2">   <b>@Html.LabelFor(model => model.Field2)</b></div>
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Field2)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="control-label col-md-2">   <b>@Html.LabelFor(model => model.Field3)</b></div>
                        <div class="col-md-10">
                            @Html.ValueFor(model => model.Field3)
                    </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Save" class="btn btn-primary" />
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</body>

任何帮助将不胜感激。提前致谢。

【问题讨论】：

您需要将 @Html.ValueFor() 包装在另一个 div 中，并为 padding-top 或 margin-top 添加一些值。
目前，我会尝试，谢谢。但我希望有一个“更清洁”的解决方案。

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

【解决方案1】：

label 元素默认具有7px 上边距，与EditorFor 创建的input 元素相比。而ValueFor（默认）只是在 DOM 中创建一个文本节点。您只需将相同的 margin-top 样式应用于 ValueFor 输出或父 Div。

<div class="form-group">
    <div class="control-label col-md-2">
        <b>@Html.LabelFor(model => model.Field3)</b>
    </div>
    <div class="col-md-10" style="margin-top:7px">
        @Html.ValueFor(model => model.Field3)
    </div>
</div>

注意，我建议你为它创建一个 CSS 类，而不是在这里使用样式标签。

【讨论】：

目前，我将使用它，它似乎有效。谢谢！

【解决方案2】：

问题是您的 EditorFor 需要将 form-control 类传递给输入，正如您从 examples on the official docs 看到的那样。

您似乎没有遵循文档中的标记建议。

只要您使用的是 MVC 5.1，每个表单组应该更像这样：

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

【讨论】：

将该属性与“EditorFor”一起使用不会改变任何内容。而“ValueFor”不喜欢它，直接，它没有定义。无论如何，谢谢。
我认为可能是这种情况，但是如果您查看我链接到的文档，您会发现您没有整体遵循建议的 html 布局。 LabelFor 应该有 control-label 类而不是包装 div。

【解决方案3】：

试试这个

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

【讨论】：