0

En la documentación de bootstrap 4, existe este ejemplo en Forms / Form Row que muestra un select con su etiqueta una sobre la otra. Este es mi formulario completo:

<div class="container">

    <div class="modal fade" id="ventana" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Crear Usuario</h5>
                </div>

                <div class="modal-body">
                    <form action="index.php" method="POST" enctype="multipart/form-data">

                    <div class="form-group row">
                        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputState" class="col-xs-2 col-form-label">State</label>
                        <div class="col-xs-10">
                            <select id="inputState" class="form-control">
                                <option selected>Choose...</option>
                                <option>...</option>
                            </select>
                        </div>
                    </div>

                        <input type="submit" value="Grabar" name="grabar" class="btn btn-primary btn-block">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

El formulario está dentro de una ventana modal. Pero el select no alinea como los campos anteriores. introducir la descripción de la imagen aquí

1 respuesta 1

2

La respuesta la tienes en la documentación de bootstrap que has puesto, ahí se explica como ponerlos en línea, te he puesto un ejemplo con tu formulario, como verás tienes que meter el elemento input (en tu caso un select) dentro de un div y poner ahí el espacio que ocupará en xs o sm para que en pantallas pequeñas no se vea mal.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group row">
  <label for="inputState" class="col-xs-2 col-form-label">State</label>
  <div class="col-xs-10">
  <select id="inputState" class="form-control">
    <option selected>Choose...</option>
    <option>...</option>
  </select>
  </div>
</div>

3
  • Acabo de actualizar la respuesta. Apliqué tu solución, pero no alinea los campos.
    – Puntay
    Commented el 24 jun. 2018 a las 17:55
  • Si te das cuenta en tu ejemplo los divs que contienen los dos primeros elementos tienen la clase row, pero el de state no, para que se alinee tienes que añadir row en el div que contiene el label y el select. Y también te recomiendo que los 3 campos cambien a la vez, porque veo en tu ejemplo que los dos primeros en pantallas sm cambiarán de alineación, en cambio el último lo tienes xs, te recomiendo que los 3 tengan el mismo. Commented el 25 jun. 2018 a las 13:27
  • Si, al parecer copié mal el ejemplo y actualicé mi código original. Con esos cambios si funciona.
    – Puntay
    Commented el 27 jun. 2018 a las 5:19

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.