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

Question

我一直在寻找解决这个问题的方法，但到目前为止还没有找到，这让我发疯。

首先，我是web开发的新手，有ASP MVC，Bootstrap，Ajax，Javascript等，所以我求求你如果这里有一些残暴的代码，请原谅。

让我们开始提问：

我有一个使用 ASP MVC 5 和 Bootstrap 的项目，其中包含一些表单。问题是，使用 "form-horizontal" class，我无法很好地对齐控件，表单组的一个控件紧挨着另一个对齐，但右侧的控件有点"upped"。最好显示它：

如您所见，这是使用 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>

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

问题是您的 EditorFor 需要将 class 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>

Answer 2

试试这个

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

Answer 3

与 EditorFor 创建的 input 个元素相比，

label 个元素默认具有 7px 个上边距。而 ValueFor（默认情况下）只是在 DOM 中创建一个文本节点。您只需要将相同的 margin-top 样式应用于 ValueFor 输出或 Parent 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 class 而不是在此处使用样式标签。

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

Incorrect aligning of form controls in ASP MVC 5 and Bootstrap

css

c#

asp.net-mvc

twitter-bootstrap

twitter-bootstrap-3