0

Tenemos el siguiente formulario para un buscador, utilizando Bootstrap 3.

<form class="form-inline" action="#" method="POST"><div class="row">
    <div class="form-group form-group-inline">
        <label for="f_campo_1" class="form-group-inline">Campo 1:</label>
        <input id="f_campo_1" name="f_campo_1" type="text" maxlength="4" value=""
            class="form-control form-control-width-small"
        />
    </div>
    <div class="form-group form-group-inline" style="background-color: aqua">
        <label for="f_campo_2" class="form-group-inline">Campo 2:</label>
        <select id="f_campo_2" name="f_campo_2"
            class="form-control form-control-width-small"
        >
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
    <div class="form-group form-group-inline">
        <label for="f_campo_3" class="form-group-inline">Campo 3:</label>
        <input id="f_campo_3" name="f_campo_3" type="text" value=""
            class="form-control form-control-width-small"
        />
    </div>
    <div class="form-group form-group-inline">
        <label for="f_campo_4" class="form-group-inline">Campo 4:</label>
        <input id="f_campo_4" name="f_campo_4" type="text" value=""
            class="form-control form-control-width-extra-small"
        />
    </div>
    <div class="form-group form-group-inline">
        <label for="f_campo_5" class="form-group-inline">Campo 5:</label>
        <input id="f_campo_5" name="f_campo_5" type="text" value=""
            class="form-control form-control-width-extra-small"
        />
    </div>
    <div class="btn-group">
        <button id="btn_buscar" name="btn_buscar" type="button"
            class="btn btn-default"
        >
        <span class="glyphicon glyphicon-search"></span>&nbsp;Buscar</button>
        <button id="btn_limpiar" name="btn_limpiar" type="button"
            class="btn btn-default"
        >
        <span class="glyphicon glyphicon-refresh"></span>&nbsp;Limpiar</button>
    </div>
</div></form>

Hemos agregado las siguientes clases CSS adicionales, para poder alinear los campos de dicho formulario y evitar que queden uno debajo del otro en la versión móvil:

.form-control-width-small {
    width: 57.6px !important;
}

.form-control-width-extra-small {
    width: 38.4px !important;
}

.form-group-inline {
    display: inline-block;
}

Adjuntamos dos capturas de cómo nos queda el elemento <select> desalineado con respecto al resto:

Así se ve sin utilizar display: inline-block;:

Así se ve sin utilizar display: inline-block;

Así nos queda utilizando display: inline-block;, es decir, .form-group-inline:

Así nos queda utilizando display: inline-block; , es decir, .form-group-inline

Hemos pintado a propósito el div contenedor del label y del select respectivo con style="background-color: aqua" para que se note bien la desalineación.

Tenemos entendido que Bootstrap 3 sólo aplica los estilos a los elementos input. ¿Es realmente así?

6
  • Hola Gabriel, no entiendo muy bien el problema. Lo mismo estoy algo espeso siendo Viernes, pero lo que quieres es que se vean todos en linea ? Yo lo he probado y, aparentemente, funciona bien: jsfiddle.net/fforcen/u5c4byx7 Commented el 27 ene. 2017 a las 15:03
  • Podrías en vez de usar <div class="form-group form-group-inline"> cambiarlo por <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">` para hacer que siempre sea 4 el tamaño (en una escala del 1 al 12) y ver si esto cambia el alineamiento del control para hacer, que siempre esten en linea a pesar de que la pantalla quede pequeña puedes hacer mas chicos los valores de los xs y sm que son para pantallas "extra chicas (extra small)" y pequeñas (small)
    – eezzekl
    Commented el 27 ene. 2017 a las 15:04
  • 1
    @FernandoForcén no copiaste el codigo extra que tiene debajo del codigo principal
    – eezzekl
    Commented el 27 ene. 2017 a las 15:05
  • Lo he vuelto a copiar y sigue saliendo bien: jsfiddle.net/fforcen/u5c4byx7/1 Commented el 27 ene. 2017 a las 15:07
  • Lo que necesitas es el sistema de grillas de bootstrap😁 Commented el 27 ene. 2017 a las 15:08

2 respuestas 2

1

Como comenta @eezzekl tendrías que usar un diseño por columnas. Lo que quieres usar de un formulario inline solo te sirve para poner en linea el label y el input según la documentación. Si quieres que se mantengan uno encima del otro tendrás que usar columnas. Te dejo un ejemplo a ver si te sirve: https://jsfiddle.net/fforcen/u5c4byx7/2/

Te dejo como quedaría con el cambio:

<div class="container-fluid">
    <form class="form-inline" action="#" method="POST">
        <div class="row">
            <div class="form-group col-xs-4">
                <label for="f_campo_1" class="form-group-inline">Campo 1:</label>
                <input id="f_campo_1" name="f_campo_1" type="text" class="form-control form-control-width-small" maxlength="4" value="">
            </div>
            <div class="form-group col-xs-4" style="background-color: aqua">
                <label for="f_campo_2" class="form-group-inline">Campo 2:</label>
                <select id="f_campo_2" name="f_campo_2" class="form-control form-control-width-small">
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                </select>
            </div>
            <div class="form-group col-xs-4">
                <label for="f_campo_3" class="form-group-inline">Campo 3:</label>
                <input id="f_campo_3" name="f_campo_3" type="text" class="form-control form-control-width-small" value="">
            </div>
            <div class="form-group col-xs-4">
                <label for="f_campo_4" class="form-group-inline">Campo 4:</label>
                <input id="f_campo_4" name="f_campo_4" type="text" class="form-control form-control-width-extra-small" value="">
            </div>
            <div class="form-group col-xs-4">
                <label for="f_campo_5" class="form-group-inline">Campo 5:</label>
                <input id="f_campo_5" name="f_campo_5" type="text" class="form-control form-control-width-extra-small" value="">
            </div>
        </div>
        <div class="row">

            <div class="btn-group">
                <button id="btn_buscar" name="btn_buscar" type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>&nbsp;Buscar</button>
                <button id="btn_limpiar" name="btn_limpiar" type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span>&nbsp;Limpiar</button>
            </div>
        </div>
    </form>

</div>
2
  • Fernando muchísimas gracias, quedó alineado el elemento select del buscador, hemos modificado col-xs-4 por col-xs-2, para que no queden tan espaciados los campos en la versión de escritorio. Commented el 27 ene. 2017 a las 16:02
  • Iremos probando con las diferentes clases de Bootstrap para cada resolución (lg, md, sm y xs) para que vaya quedando mejor. Commented el 27 ene. 2017 a las 16:04
0

verifica el sistema de rejillas de boostrap, te sirve para alinear mediante divs la informacion que desees, es facil de usar y es adaptable a moviles, te recomiendo usar eso, solo es cuestion de adaptarlo a tu codigo html....

por ejemplo, si deseas crear un formulario con dos columnas y que se vea igual tanto para pantallas de escritorio como para tabletas y moviles puedes hacer lo siguiente...

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<!-- contenido de tu columna izquierda -->
</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<!-- contenido de tu columna derecha -->
</div>

lo que significa cada uno es lo siguiente....

col-lg-6 es para pantallas grandes (lg = large) col-md-6 es para pantallas medianas (md = medium) col-sm-6 es para pantallas pequeñas como tabletas (sm = small) col-xs-6 es para pantallas aun mas pequeñas como moviles

los numeros son el ancho de la pantalla que abarcara, lo maximo es 12 y el minimo es 1, es decir, si especificas 12 abarcara el ancho de la pantalla completa, si especificas 6 abarcara la mitad, y asi por cada numero, ademas las columnas se ordenan de izquierda a derecha.... para docmentarte bien en esto, te sugiero visites la pagina oficial de boostrap en el apartado de rejillas o drids y entenderas de una manera rapida el manejo de las mismas...

saludos

1

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.