0

Estoy realizando un formulario, pero a la hora de ya verlo visualmente, me quedan muy separados la descripción(label) del input La verdad no se mucho de diseñar paginas web, solo agarro una plantilla y la voy modificando sobre ese, utilizo bootstrap introducir la descripción de la imagen aquí

Asi lo tengo en el diseño

<!--BLOQUE 1-->
            
            <div class="row form-group">
                <label class="col-lg-1 control-label ">Nombre:</label>
                <div class="col-lg-2">
                    <input type="text" name="firstName" placeholder="Nombre(s)" onkeyup="Mayusculas(this)" class="form-control" id="Nombre" autocomplete="off">
                </div>

                <div class="mb-md hidden-lg hidden-xl"></div>
                <label class="col-lg-1 ">Apellido Paterno:</label>
                <div class="col-lg-2">
                    <input type="text" name="lastName" placeholder="Apellido Paterno" onkeyup="Mayusculas(this)" class="form-control" id="Apelllido_Paterno" autocomplete="off">
                </div>

                <div class="mb-md hidden-lg hidden-xl"></div>
                <label class="col-lg-1 ">Apellido Materno:</label>
                <div class="col-lg-2">
                    <input type="text" name="lastName" placeholder="Apellido Materno" onkeyup="Mayusculas(this)" class="form-control" id="Apelllido_Materno" autocomplete="off">
                </div>
            </div>

1
  • 1
    Hola Creo que solo debes reducir el tamaño de la clase col o inclusive borrarla. el 12 mar. 2021 a las 21:41

1 respuesta 1

1

Podrias intentar cambiando en la clase de la columna cambiar un lg(large) por un sm (small)

 <div class="row form-group">
            <label class="col-sm-1 control-label ">Nombre:</label>
            <div class="col-sm-2">
                <input type="text" name="firstName" placeholder="Nombre(s)" onkeyup="Mayusculas(this)" class="form-control" id="Nombre" autocomplete="off">
            </div>

Y si esto no reduce el espacio, la otra opcion es eliminar las clases o colocarlas como en este ejemplo:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Que lo que haría seria poner los label´s encima de los input's, es cuestion de "jugar" un poco con las clases. Otra soluccion seria agregar CSS.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.