css - bootstrap container
Diseño Bootstrap en una resolución más baja (3)
El sistema de grilla bootstrap está dividido en 12 columnas.
12 columnas representan la página completa.
El sistema de grids Bootstrap tiene cuatro clases, dependiendo del tamaño de su dispositivo
- xs: esto se usa para teléfonos inteligentes
- sm: esto se usa para tabletas
- md: esto se usa para escritorios
- lg: esto se usa para escritorios más grandes
Es importante tener en cuenta que cada clase se amplía. Por ejemplo, para usar el mismo ancho para teléfonos inteligentes y tabletas, simplemente necesitaría una clase col-xs-xx
En su caso, col-sm-2 representa dos de las 12 columnas en una pantalla. En otras palabras, siempre ocupará un sexto de la pantalla.
El sistema de cuadrícula de Bootstrap es receptivo y las columnas se reorganizarán según el tamaño de la pantalla: en una pantalla grande podría verse mejor con el contenido organizado en tres columnas, pero en una pantalla pequeña sería mejor si los elementos de contenido estuvieran apilados. Encima del otro.
Recurso
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Tengo el siguiente código:
<div class="row">
<div class="col-sm-2">
<input style="width:100%" >
</div>
</div>
Y Fiddle: muestra
En mi resolución predeterminada: 1920x1080 cambiando el número de columnas (col-sm-2) cambiará el ancho de la entrada de texto. Pero en 1024x768, el ancho es siempre la columna completa independientemente de la configuración col-sm-xx. ¿Alguien puede explicar por qué está sucediendo?
Gracias
La clase que está utilizando, col-sm-2 tomará 1/6 (2/16) del ancho disponible hasta que el ancho de su ventana sea inferior a 768px wide . Más detalles sobre los puntos de interrupción y el soporte del dispositivo aquí:
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
BootStrap sigue una regla simple, es decir, MOBILE FIRST
Significa si solo proporcionas col-xs-?? entonces esto tiene prioridad y cualquier número que se proporcione aquí se proporcionará a todas las pantallas de tamaño anterior a menos que se proporcione específicamente.
Similar es el caso de col-sm-?? por lo tanto, no afectará a la pantalla xs pero afectará las pantallas md y lg si no se proporcionan por separado.
Por lo tanto, lo que está sucediendo es que solo representa la propiedad de BootStrap.
Prioridad de CSS: xs> sm> md> lg
Es por eso que se aconseja al escribir CSS
Ponga consulta de medios para pantallas más grandes, no para pantallas móviles.
Espero que responda tu pregunta.