0

tengo un formulario donde dos inputs están alineado, el problema que tengo es que no soy capaz de poner que cuando sea una versión móvil pegue el salto y se posicione debajo.

Seguramente sea un pego, pero para el diseño...

              <form>
                    <div class="col-xs-6">
                        <div class="input-group input-group-lg">
                            <!-- /btn-group -->
                            <input type="text" class="form-control" id="resultado" placeholder="IDENTIFICACIÓN">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-primary" id="escaner">ESCANEAR</button>
                            </div>
                        </div>                       
                    </div>            
                    <div class="col-xs-6">
                        <div class="input-group input-group-lg">
                            <input type="text" class="form-control" id="resultado2" placeholder="ORDER DE TRABAJO">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-primary" id="escaner2">ESCANEAR</button>
                            </div>
                        </div>                       
                    </div>
                </form>

1 respuesta 1

2

Bien lo que debes entender este momento es como funciona el grid de Bootstrap nota que una fila esta compuesta de 12 columnas. Por lo tanto al decirle a los div con la clase col-xs-6 estas diciendo que tomen 6 de las 12 columnas.

Creo que xs no se usa mas, por lo tanto va de forma general en adelante

Ahora bien leyendo tu caso deberías tomar las 12 columnas con col-12 y agregar las clases extras para cuando ya no estas en móvil. Es decir debes agregar algo parecido a esto col-md-6 con esto esta diciendo que sí la pantalla es mayor a 768px tome 6 de las 12 columnas.

Y tendrías algo como lo siguiente:

<div class="row">
    <div class="col-12 col-md-6">
      columna de 12 en sm y de 6 en md
    </div>
    <div class="col-12 col-md-6">
      columna de 12 en sm y de 6 en md
    </div>
</div>

Nota que puedes seguir agregando mas clases para el resto de medidas lg, xl, etc.

Grid de Bootstrap

1
  • Efectivamente, la clase col-xs-* dejó de utilizarse a partir de la v4, aunque al parecer el OP utiliza la v3, podría usar igualmente .col-xs-12, en este caso .col-md-* se aplicaría a pantallas mayores que 992px Commented el 7 may. 2021 a las 12:50

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.