Web 表单文本字段不直接位于 ASP 身份注册页面上

我在 Web 表单项目中遇到文本字段未正确对齐的问题。我使用 Visual Studio 2013 中的 Web 窗体创建了一个新的 ASP.NET Web 应用程序。我对 ASP Identity 用户表进行了更改，以获取有关每个用户的附加信息。 （地址、城市、州、邮政编码、电话、传真和电子邮件）然后我进入帐户注册Register.aspx页并复制第一个字段User Name这样我将为每个字段等使用所有相同的引导类名称..并创建它的多个副本并重命名每个副本，并且在注册页面上捕获新信息没有问题。

HOWEVER

渲染的页面被顶起。我添加的每个新字段都未对齐。看这里：

现在我将向您展示该页面的代码是什么样的。

更新以显示错误
查看本页代码末尾附近按钮 DIV 之前的注释

    <%@ Page Title="Register" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="WFK5.Account.Register" %>

    <asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
        <h2><%: Title %>.</h2>
        <p class="text-danger">
            <asp:Literal runat="server" ID="ErrorMessage" />
        </p>

        <div class="form-horizontal">
            <h4>Create a new account.</h4>
            <hr />
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="text-danger" />
            <div class="form-group">
                <asp:Label ID="Label1" runat="server" AssociatedControlID="UserName" CssClass="col-md-2 control-label">User name</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="UserName" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName"
                        CssClass="text-danger" ErrorMessage="The user name field is required." />
                </div>
            </div>
            <div class="form-group">
                <asp:Label ID="Label2" runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Password"
                        CssClass="text-danger" ErrorMessage="The password field is required." />
                </div>
            </div>
            <div class="form-group">
                <asp:Label ID="Label3" runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label">Confirm password</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ConfirmPassword"
                        CssClass="text-danger" Display="Dynamic" ErrorMessage="The confirm password field is required." />
                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
                        CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
                </div>
            <div class="form-group">
                <asp:Label ID="Label4" runat="server" AssociatedControlID="Address" CssClass="col-md-2 control-label">Address</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Address" CssClass="form-control" />
                </div>
            </div>

            <div class="form-group">
                <asp:Label ID="Label5" runat="server" AssociatedControlID="City" CssClass="col-md-2 control-label">City</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="City" CssClass="form-control" />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label6" runat="server" AssociatedControlID="State" CssClass="col-md-2 control-label">State</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="State" CssClass="form-control" />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label7" runat="server" AssociatedControlID="Zip" CssClass="col-md-2 control-label">Zip</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Zip" CssClass="form-control" />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label8" runat="server" AssociatedControlID="Phone" CssClass="col-md-2 control-label">Phone</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Phone" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="Phone"
                        CssClass="text-danger" ErrorMessage="The Phone field is required." />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label9" runat="server" AssociatedControlID="Fax" CssClass="col-md-2 control-label">Fax</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Fax" CssClass="form-control" />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label10" runat="server" AssociatedControlID="Email" CssClass="col-md-2 control-label">Email</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Email" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="Email"
                        CssClass="text-danger" ErrorMessage="The Email field is required." />
                </div>
            </div>


            </div> <!--THIS DIV SHOULD HAVE BEEN THE CLOSING DIV FOR THE PASS CONF FIELD -->
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <asp:Button ID="Button1" runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" />
                </div>
            </div>
        </div>
    </asp:Content>

抱歉，我知道代码很多： 但我想确保我没有遗漏任何内容，所以我发布了整个页面。

另外，这里是 Visual Studio 中设计视图的屏幕截图。

我明白，您可以清楚地看到设计视图中每个文本字段的位置和大小有所不同，但我只触及了代码。其他地方是否有一个文件可能会跟踪设计视图中的某些其他类型的格式，这些格式可能会影响页面上的最终结果。我以前使用过网络表单，但从不记得遇到过此类问题。

任何帮助或想法将不胜感激。从功能上来说它是有效的，但从美学上来说它很糟糕，我无法弄清楚。

           <div class="form-group">
                <asp:Label ID="Label3" runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label">Confirm password</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ConfirmPassword"
                        CssClass="text-danger" Display="Dynamic" ErrorMessage="The confirm password field is required." />
                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
                        CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
                </div>
</div>------------------------Missing This Closing Div----------------------
<div class="form-group">
                <asp:Label ID="Label4" runat="server" AssociatedControlID="Address" CssClass="col-md-2 control-label">Address</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Address" CssClass="form-control" />
                </div>
            </div>

缺少的 div 导致你的 css 关闭。通常，当您遇到对齐问题时，这是由于 CSS 或格式不正确造成的。