详细信息和编辑视图中的对齐问题答案

【问题标题】：Alignment Problems in Details and Edit View详细信息和编辑视图中的对齐问题
【发布时间】：2017-06-17 07:46:57
【问题描述】：

我不知道如何让它与 mvc 6 正确对齐。“下拉”有一个 CSS 标签，但它只是 position: relative 并且根本不做任何事情。这都是使用 Entity Framework 自动生成的脚手架。

<div class="form-horizontal">
        <h4>Person</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.PersonId)

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

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

        <div class="form-group">
            @Html.LabelFor(model => model.Roles, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="dropdown">
                @Html.DropDownList("RoleList", null, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Roles, "", new { @class = "text-danger" })
            </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>

页面来源

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>


</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">BDP New User Tool</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/Location">Locations</a></li>
                    <li><a href="/Country">Countries</a></li>
                    <li><a href="/Department">Departments</a></li>
                </ul>
                <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="wgihBWaaShrDRYvgLvQl0KJsu0kxsOUARHb-vQI02G1yA71ip-y44MmYKFuXBbkLGCvzB1TeOyyC-Zz5NGEWZm9JR-7iRCsmuAv9osMEobzooZglgT4CeWIvvIlKu6wnTLKcAlJo8DW-ci9aD8kV6A2" />    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="/Manage" title="Manage">Hello nathan.mckaskle@email.com!</a>
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
</form>
            </div>
        </div>
    </div>
    <div class="container body-content">



<h2>Edit</h2>

<form action="/people/Edit/1" method="post"><input name="__RequestVerificationToken" type="hidden" value="P-S-hQ1lZkis-H2u8xV_ovw4chg0_lTzY9gx3h6xJn77k4HqJFQipnnKp5D2TeSFeTciZeACc9iljdDwmKErGepreF-kc3RMf9d1wFPAUlEaqbhAQ8sOBgcXmr0XlRayMEZt1lfA8OfqkpG3_xhN2A2" />    <div class="form-horizontal">
        <h4>Person</h4>
        <hr />

        <input data-val="true" data-val-number="The field PersonId must be a number." data-val-required="The PersonId field is required." id="PersonId" name="PersonId" type="hidden" value="0" />

        <div class="form-group">
            <label class="control-label col-md-2" for="FullName">Full Name</label>
            <div class="col-md-10">
                Nathan McKaskle
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Email">Email</label>
            <div class="col-md-10">
                nathan.mckaskle@email.com
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Roles">Roles</label>
            <div class="dropdown">
                <select class="form-control" id="RoleList" name="RoleList"><option selected="selected" value="71758b95-b2b1-410a-8267-ebbd26905102">Admin</option>
<option value="5c0c5cba-fb44-4320-8d9c-e76544e77d60">Basic</option>
<option value="c34e731d-30a2-42e5-9d64-d1c2bd33ef17">Create</option>
</select>
                <span class="field-validation-valid text-danger" data-valmsg-for="Roles" data-valmsg-replace="true"></span>
            </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>
</form>
<div>
    <a href="/people">Back to List</a>
</div>

        <hr />
        <footer>
            <p>&copy; 2017 - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"fa5c07ac3f3645a88405d2c43af159f5"}
</script>
<script type="text/javascript" src="http://localhost:22384/f8c630454ed048b89d34363a3c17c7fe/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

更新：这是对我的 HTML 的更新，由以下答案推荐。这使得页面上的每个元素都分散在各处。请参阅下一个屏幕截图。

@model NewUserTool.Models.PersonViewModel

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Person</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.PersonId)

        <div class="form-control-static">
            @Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DisplayFor(model => model.FullName, new { @class = "form-control" })
            </div>
        </div>

        <div class="form-control-static">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DisplayFor(model => model.Email, new { @class = "form-control" })
            </div>
        </div>

        <div class="form-control-static">
            @Html.LabelFor(model => model.Roles, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="dropdown">
                @Html.DropDownList("RoleList", null, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Roles, "", new { @class = "text-danger" })
            </div>
        </div>

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

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

这样做：

【问题讨论】：

让我们看看你试图修改的 css。你希望它看起来像什么？
这是内置的标准 bootstrap.css。
你能告诉我们生成的html，而不是你的模板吗？
@SergChernata 我不知道你指的是什么。这是此处屏幕截图页面中涉及的唯一 html。生成了 bootstrap.css 文件。
@NathanMcKaskle 在浏览器中生成了 html....您的模板生成的内容。

标签： html css asp.net-mvc vertical-alignment text-alignment

【解决方案1】：

DisplayFor 不像 EditorFor 那样接受 htmlAttributes。 FullName 之类的字符串的默认显示是仅转储字符串值而不转储任何 HTML，因此在大多数情况下，实际上不需要添加任何属性。但是，即使这确实有效，您仍然会在这里使用错误的类，因为您正在寻找的实际上是 form-control-static，它设置了要对齐的文本样式，就好像它是带有类 form-control 的输入一样。所以你实际需要的代码是：

<p class="form-control-static">@Html.DisplayFor(m => m.Email)</p>

此外，您的下拉菜单未对齐，因为您没有正确传递 HTML 属性。匿名对象语法中的匿名对象用于EditorFor。 EditorFor 中的那个参数实际上是用于附加视图数据。实际上，您正在向ViewData 添加一个名为htmlAttributes 的键，默认编辑器模板会在ViewData 中查找此键并对其进行处理。但是，对于像TextBoxFor、DropDownListFor 等帮助程序，参数本身是用于 HTML 属性的。结果，您告诉它添加一个名为htmlAttributes 的属性并为其提供该匿名对象的值，我什至不确定助手会做什么。长话短说，把代码改成：

@Html.DropDownList("RoleList", null, new { @class = "form-control" })

【讨论】：

哇，现在一切都在页面的不同位置。
仅此更改不会导致这种情况。还有什么问题。发布您的更新代码。

【解决方案2】：

在您的html 中，您从未正确包装过dropdown。如果您有一行，请务必声明列，总共 12 个。

<div class="form-group">
    <label class="control-label col-md-2" for="Roles">Roles</label>
    <div class="col-md-10">
        <div class="dropdown">
            <select class="form-control" id="RoleList" name="RoleList"><option selected="selected" value="71758b95-b2b1-410a-8267-ebbd26905102">Admin</option>
                <option value="5c0c5cba-fb44-4320-8d9c-e76544e77d60">Basic</option>
                <option value="c34e731d-30a2-42e5-9d64-d1c2bd33ef17">Create</option>
            </select>
            <span class="field-validation-valid text-danger" data-valmsg-for="Roles" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>

另外，我确实将您的文本包装到 p 标签中，并应用与标签相同的上边距。

https://jsfiddle.net/a3abkffj/

【讨论】：

在实际的 cshtml 文件中看起来如何？
只需将您的下拉菜单包装成<div class="col-md-10">
@SergChemata 这适用于下拉菜单，但不适用于其他文本。