none
consulta form en boostrap 3.0 RRS feed

  • Pregunta

  • Hola gente soy nuevo utilizando bootstrap y todavía no comprendo bien como funciona. estoy tratando de hacer un formulario pero no me está quedando del todo bien

    De momento tengo este código:

    <div class="form-horizontal">
            <h4>Crear una nueva cuenta</h4>
            <hr />
            <asp:ValidationSummary runat="server" CssClass="text-danger" />
            <div class="row">
                <div class="form-group col-md-4">
                    <asp:Label runat="server" AssociatedControlID="razonSocial" CssClass="col-md-4 control-label">Razon Social</asp:Label>
                    <div class="col-md-8">
                        <asp:TextBox runat="server" ID="razonSocial" CssClass="form-control" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="razonSocial" CssClass="text-danger" ErrorMessage="El campo nombre es obligatorio." />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <asp:Label runat="server" AssociatedControlID="tipoDoc" CssClass="col-md-4 control-label">IVA:</asp:Label>
                    <div class="col-md-8">
                        <asp:DropDownList runat="server" ID="sitIVA" CssClass="form-control" OnSelectedIndexChanged="sitIVA_SelectedIndexChanged" AutoPostBack="true">
                            <asp:ListItem Value="0">Resp.Inscripto</asp:ListItem>
                            <asp:ListItem Value="1">Monotributista</asp:ListItem>
                            <asp:ListItem Value="2">Consumidor Final</asp:ListItem>
                            <asp:ListItem Value="3">Exento</asp:ListItem>
                        </asp:DropDownList>
                    </div>
                </div>
                <div class="col-md-offset-2 form-group col-md-6 ">
                    <asp:Label runat="server" AssociatedControlID="documento" CssClass="col-md-4 control-label">Tipo y Nro.Documento</asp:Label>
                    <div class="col-md-3">
                        <asp:DropDownList runat="server" ID="tipoDoc" CssClass="form-control">
                            <asp:ListItem Value="0">DNI</asp:ListItem>
                            <asp:ListItem Value="1">CUIT</asp:ListItem>
                        </asp:DropDownList>
                    </div>
                    <div class="col-md-5">
                        <asp:TextBox runat="server" ID="documento" CssClass="form-control" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="documento" CssClass="text-danger" ErrorMessage="El campo documento es obligatorio." />
                    </div>
                </div>
    
            </div>
            <div class="row">
                <div class="form-group col-md-3">
                    <asp:Label runat="server" AssociatedControlID="provincias" CssClass="col-md-4 control-label">Provincia</asp:Label>
                    <div class="col-md-8" id="dropDownListProvincias">
                        <asp:DropDownList runat="server" ID="provincias" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="provincias_SelectedIndexChanged"></asp:DropDownList>
                    </div>
                </div>
                <div class="form-group col-md-3">
                    <asp:Label runat="server" AssociatedControlID="ciudades" CssClass="col-md-4 control-label">Ciudad</asp:Label>
                    <div class="col-md-8">
                        <asp:DropDownList runat="server" ID="ciudades" CssClass="form-control" OnSelectedIndexChanged="ciudades_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
                    </div>
                </div>
                <div class="form-group col-md-3">
                    <asp:Label runat="server" AssociatedControlID="calles" CssClass="col-md-3 control-label">Calle</asp:Label>
                    <div class="col-md-9">
                        <asp:DropDownList runat="server" ID="calles" CssClass="form-control"></asp:DropDownList>
                    </div>
                </div>
                <div class="form-group col-md-3">
                    <asp:Label runat="server" AssociatedControlID="numCalle" CssClass="col-md-2 control-label">Altura</asp:Label>
                    <div class="col-md-4">
                        <asp:TextBox runat="server" ID="numCalle" CssClass="form-control"></asp:TextBox>
                    </div>
                     <asp:Label runat="server" AssociatedControlID="depto" CssClass="col-md-2 control-label">Depto</asp:Label>
                        <div class="col-md-4">
                            <asp:TextBox runat="server" ID="depto" CssClass="form-control"></asp:TextBox>
                        </div>
                   
                </div>
    
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <asp:Label runat="server" AssociatedControlID="telefono" CssClass="col-md-4 control-label">Telefono</asp:Label>
                    <div class="col-md-8">
                        <asp:TextBox runat="server" ID="telefono" CssClass="form-control"></asp:TextBox>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <asp:Label runat="server" AssociatedControlID="Usuario" CssClass="col-md-4 control-label">Usuario</asp:Label>
                    <div class="col-md-8">
                        <asp:TextBox runat="server" ID="Usuario" CssClass="form-control" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="Usuario"
                            CssClass="text-danger" ErrorMessage="El campo nombre de usuario es obligatorio." />
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <asp:Label runat="server" AssociatedControlID="Email" CssClass="col-md-4  control-label">Correo electrónico</asp:Label>
                    <div class="col-md-8">
                        <asp:TextBox runat="server" ID="Email" CssClass="form-control" TextMode="Email" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="Email"
                            CssClass="text-danger" ErrorMessage="El campo de correo electrónico es obligatorio." />
                    </div>
                </div>
    
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <asp:Button runat="server" OnClick="CreateUser_Click" Text="Registrarse" CssClass="btn btn-default" />
                </div>
            </div>
        </div>

    Este es el aspecto que tiene:


    No se por qué me hace ese espacio abajo de los campos de iva, los dropdownlist quedan muy abajo



    lunes, 16 de septiembre de 2019 4:24

Respuestas

  • hola

    de donde sacaste el form-row ? porque si analizamos la doc

    https://getbootstrap.com/docs/3.4/css/#forms

    se usa form-group, digo si es que quieres usar esta tecnica

    Sino tienes que aplicar el grid system

    https://getbootstrap.com/docs/3.4/css/#grid

    Si un control ocupa mas de su tamaño va a saltar a la siguiente linea

    Tambien la verdad que controles de asp.net no se llevan bien con este tipo de layput, no evaluaste pasarte a asp.net mvc?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    lunes, 16 de septiembre de 2019 13:53
  • hola

    El form-group entiendo se puede aplicar junto a grid system, pero creo que no es buena idea mezclarlos, si usas form-group ve a un diseño del form, si usas grid system aplicalo por separado

    recuerda que puedes usar el developer tools del browser, al cual accedes con F12, para inspeccionar el html de la pagina y ver como aplica las rows

    Creo que esto aplica a bootstrap 4

    Bootstrap Forms

    en donde veo el uso del "form-group row"

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina



    lunes, 16 de septiembre de 2019 14:11
  • hola

    de donde sacaste el form-row ? porque si analizamos la doc

    https://getbootstrap.com/docs/3.4/css/#forms

    se usa form-group, digo si es que quieres usar esta tecnica

    Sino tienes que aplicar el grid system

    https://getbootstrap.com/docs/3.4/css/#grid

    Si un control ocupa mas de su tamaño va a saltar a la siguiente linea

    Tambien la verdad que controles de asp.net no se llevan bien con este tipo de layput, no evaluaste pasarte a asp.net mvc?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    hice un par de modificaciones, se puede usar form-group para agrupar los controles dentro de un row??

    o sólo se utilizan cuando no se aplica el sistema de grillas??

    lunes, 16 de septiembre de 2019 14:02

Todas las respuestas

  • hola

    de donde sacaste el form-row ? porque si analizamos la doc

    https://getbootstrap.com/docs/3.4/css/#forms

    se usa form-group, digo si es que quieres usar esta tecnica

    Sino tienes que aplicar el grid system

    https://getbootstrap.com/docs/3.4/css/#grid

    Si un control ocupa mas de su tamaño va a saltar a la siguiente linea

    Tambien la verdad que controles de asp.net no se llevan bien con este tipo de layput, no evaluaste pasarte a asp.net mvc?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    lunes, 16 de septiembre de 2019 13:53
  • hola

    de donde sacaste el form-row ? porque si analizamos la doc

    https://getbootstrap.com/docs/3.4/css/#forms

    se usa form-group, digo si es que quieres usar esta tecnica

    Sino tienes que aplicar el grid system

    https://getbootstrap.com/docs/3.4/css/#grid

    Si un control ocupa mas de su tamaño va a saltar a la siguiente linea

    Tambien la verdad que controles de asp.net no se llevan bien con este tipo de layput, no evaluaste pasarte a asp.net mvc?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    hice un par de modificaciones, se puede usar form-group para agrupar los controles dentro de un row??

    o sólo se utilizan cuando no se aplica el sistema de grillas??

    lunes, 16 de septiembre de 2019 14:02
  • hola

    El form-group entiendo se puede aplicar junto a grid system, pero creo que no es buena idea mezclarlos, si usas form-group ve a un diseño del form, si usas grid system aplicalo por separado

    recuerda que puedes usar el developer tools del browser, al cual accedes con F12, para inspeccionar el html de la pagina y ver como aplica las rows

    Creo que esto aplica a bootstrap 4

    Bootstrap Forms

    en donde veo el uso del "form-group row"

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina



    lunes, 16 de septiembre de 2019 14:11