asp.net - usar - Campos de texto de formulario web no directamente en la página de registro de identidad de ASP

instalar bootstrap en visual studio 2017

Question

Tengo un problema con los campos de texto que no se alinean correctamente en un proyecto de formularios web. Creé una nueva aplicación web ASP.NET utilizando formularios web en Visual Studio 2013. Realicé un cambio en la tabla de usuarios de Identidad ASP para obtener información adicional sobre cada usuario. (Dirección, Estado de la ciudad, Código postal, Teléfono, Fax y Correo electrónico) Luego entré a la página Register.aspx suscripción de Register.aspx y copié el primer User Name campo para poder utilizar todos los mismos nombres de clase de arranque para cada campo, etc. y creó varias copias de la misma y renombró cada una de ellas y no ha tenido problemas para capturar esa nueva información en la página de Registro.

SIN EMBARGO

La página renderizada está levantada. Cada campo nuevo que agregué está desalineado. Mira aquí:

Entonces ahora te mostraré cómo se ve mi código para esa página.

ACTUALIZADO PARA MOSTRAR EL ERROR
MIRAR COMENTARIO A LA DERECHA ANTES DEL BOTÓN DIV CERCA DEL FINAL DE ESTA PÁGINA DE CÓDIGO

    <%@ 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>

LO SIENTO, ESO ES MUCHO CÓDIGO: Pero quería asegurarme de no dejar nada, así que publiqué toda la página.

Además, aquí hay una captura de pantalla de la Vista de diseño en Visual Studio.

Entiendo, se puede ver claramente que hay algo diferente sobre la ubicación y el tamaño de cada campo de texto en la vista de diseño, pero solo toqué el código. ¿Hay algún archivo en algún otro lugar que pueda realizar un seguimiento de algún otro tipo de formato desde la vista de diseño que pueda afectar el resultado final en la página? He usado formularios web antes y nunca recuerdo tener este tipo de problema.

Cualquier ayuda o idea sería muy apreciada. Funcionalmente funciona, pero estéticamente es una porquería y no puedo resolverlo.

Answer 1

           <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>

La div faltante está causando que tu CSS esté desactivado. Por lo general, cuando tiene un problema de alineación, se debe a CSS o a un formato incorrecto.