css - left - container-fluid bootstrap 4
¿Cuál es la diferencia entre col-lg-*, col-md-*y col-sm-*en Bootstrap? (9)
¿Cuál es la diferencia entre col-lg-* , col-md-* y col-sm-* en Twitter Bootstrap?
Bueno, se usa para decirle a Bootstrap cuántas columnas se colocarán en una fila dependiendo del tamaño de la pantalla.
col-xs-2
mostraría solo 2 columnas seguidas en pantalla extra pequeña (xs), de la misma manera que sm define una pantalla pequeña, md (tamaño mediano), lg (tamaño grande), pero de acuerdo con la primera regla más pequeña de bootstrap, si menciona
xs-col-2 md-col-4
luego se mostrarán 2 columnas en cada fila para los tamaños de pantalla desde xs hasta sm (incluido) y los cambios cuando llegue al siguiente tamaño, es decir, de md hasta lg (incluido) para una mejor comprensión de los tamaños de pantalla, intente ejecutarlos en varios modos de pantalla en modo desarrollador de Chrome (ctr + shift + i) y pruebe varios píxeles o dispositivos
Creo que el aspecto confuso de esto es el hecho de que BootStrap 3 es un primer sistema móvil con capacidad de respuesta y no explica cómo afecta esto a la jerarquía de col-xx-n en esa parte de la documentación de Bootstrap. Esto hace que se pregunte qué sucede en dispositivos más pequeños si elige un valor para dispositivos más grandes y le hace preguntarse si es necesario especificar varios valores. (Tu no)
Intentaré aclarar esto al afirmar que ... Los tipos de grano inferior (xs, sm) intentan retener la apariencia del diseño en pantallas más pequeñas y los tipos más grandes (md, lg) se mostrarán correctamente solo en pantallas más grandes, pero ajustarán las columnas en dispositivos más pequeños. Los valores citados en ejemplos anteriores se refieren al umbral según el cual bootstrap degrada la apariencia para ajustarse al estado de pantalla disponible.
Lo que esto significa en la práctica es que si hace que las columnas col-xs-n conserven el aspecto correcto incluso en pantallas muy pequeñas, hasta que la ventana caiga a un tamaño que sea tan restrictivo que la página no se pueda mostrar correctamente. Esto debería significar que los dispositivos que tienen un ancho de 768 px o menos deberían mostrar su tabla tal como la diseñó en lugar de degradarse (en forma de columna simple o envuelta). Obviamente, esto todavía depende del contenido de las columnas y ese es el punto. Si la página intenta mostrar varias columnas de datos de gran tamaño, una al lado de la otra en una pantalla pequeña, las columnas se ajustarán de forma horrible si no las tiene en cuenta. Por lo tanto, dependiendo de los datos dentro de las columnas, puede decidir el punto en el cual el diseño es sacrificado para mostrar el contenido adecuadamente.
por ejemplo, si su página contiene tres columnas col-sm-n, bootstrap envolvería las columnas en filas cuando el ancho de la página sea inferior a 992px. Esto significa que los datos aún están visibles pero requerirán un desplazamiento vertical para verlos. Si no desea que su diseño se degrade, elija xs (siempre que sus datos puedan mostrarse adecuadamente en un dispositivo de resolución más baja en tres columnas)
Si la posición horizontal de los datos es importante, debe intentar elegir valores de granularidad más bajos para conservar la naturaleza visual. Si la posición es menos importante pero la página debe estar visible en todos los dispositivos, se debe utilizar un valor más alto.
Si elige col-lg-n, las columnas se mostrarán correctamente hasta que el ancho de la pantalla caiga por debajo del umbral xs de 1200 px.
De la documentación de Twitter Bootstrap :
- cuadrícula pequeña (≥ 768px) =
.col-sm-*, - cuadrícula media (≥ 992px) =
.col-md-*, - rejilla grande (≥ 1200px) =
.col-lg-*.
Los docs bootstrap lo explican, pero aun así me tomó un tiempo conseguirlo. Tiene más sentido cuando me lo explico de dos maneras:
Si piensa que las columnas comienzan horizontalmente, puede elegir cuándo desea que se apilen .
Por ejemplo, si empiezas con columnas: ABC
Tú decides cuándo deberían apilarse para ser así:
UNA
segundo
do
Si elige col-lg, las columnas se apilarán cuando el ancho sea <1200px.
Si elige col-md, las columnas se apilarán cuando el ancho sea <992px.
Si elige col-sm, las columnas se apilarán cuando el ancho sea <768px.
Si elige col-xs, las columnas nunca se apilarán.
Por otro lado, si piensa en las columnas que comienzan apiladas, puede elegir en qué punto se vuelven horizontales :
Si elige col-sm, entonces las columnas se volverán horizontales cuando el ancho sea> = 768px.
Si elige col-md, entonces las columnas se volverán horizontales cuando el ancho sea> = 992px.
Si elige col-lg, las columnas se volverán horizontales cuando el ancho sea> = 1200px.
Un caso particular: antes de aprender el sistema de cuadrícula bootstrap, asegúrese de que el zoom del navegador esté configurado en 100% (cien por ciento). Por ejemplo: si la resolución de la pantalla es (1600px x 900px) y el zoom del navegador es del 175%, entonces los elementos "bootstrap-ped" se apilarán.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">class="col-lg-4"</div>
<div class="col-lg-4">class="col-lg-4"</div>
</div>
</div>
Zoom cromo 100%
Navegador 100 por ciento - elementos colocados horizontalmente
Chrome zoom 175%
Actualizado 2018 ...
La cuadrícula de Bootstrap 3 viene en 4 niveles (o "puntos de interrupción") ...
- Extra pequeño (para smartphones
.col-xs-*) - Pequeño (para tabletas
.col-sm-*) - Mediano (para laptops
.col-md-*) - Grande (para laptops / computadoras de escritorio
.col-lg-*).
Estos tamaños de cuadrícula le permiten controlar el comportamiento de la cuadrícula en diferentes anchos. Los diferentes niveles son controlados por consultas de medios CSS.
Así que en la cuadrícula de 12 columnas de Bootstrap ...
col-sm-3 tiene 3 de 12 columnas de ancho (25%) en un ancho de dispositivo pequeño típico (> 768 píxeles)
col-md-3 tiene 3 de 12 columnas de ancho (25%) en un ancho de dispositivo medio típico (> 992 píxeles)
El nivel más pequeño ( xs , sm o md ) también define el tamaño para anchos de pantalla más grandes . Entonces, para la columna del mismo tamaño en todos los niveles, simplemente configure el ancho para la ventana más pequeña ...
<div class="col-lg-3 col-md-3 col-sm-3">..</div> es lo mismo que,
<div class="col-sm-3">..</div>
Se implican niveles más grandes . Debido a que col-sm-3 significa 3 units on sm-and-up , a menos que esté específicamente anulado por un nivel más grande que use un tamaño diferente.
xs (predeterminado)> sobrescrito por sm > sobrescrito por md > sobrescrito por lg
Combine las clases para usar los anchos de columna de cambio en diferentes tamaños de cuadrícula . Esto crea un diseño sensible.
<div class="col-md-3 col-sm-6">..</div>
Las cuadrículas sm , md y lg se "apilarán" verticalmente en las pantallas / pantallas con menos de 768 píxeles. Aquí es donde la cuadrícula xs encaja. Las columnas que usan las clases col-xs-* no se col-xs-* verticalmente, y continuarán reduciéndose en las pantallas más pequeñas.
Cambie el tamaño de su navegador con esta demostración y verá los efectos de escalado de la cuadrícula.
En Bootstrap 4 hay un nuevo tamaño -xl- , vea esta demostración . También se ha eliminado el infijo -xs- , por lo que las columnas más pequeñas son simplemente col-1 , col-2 ... col-12 , etc.
col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
Además, este artículo explica más sobre la cuadrícula Bootstrap.
TL; DR
.col-XY significa en el tamaño de pantalla X y superior , estira este elemento para rellenar las columnas Y.
Bootstrap proporciona una cuadrícula de 12 columnas por .row , por lo que Y = 3 significa ancho = 25%.
xs, sm, md, lg son los tamaños para teléfono inteligente, tableta, laptop, computadora de escritorio, respectivamente.
El punto de especificar diferentes anchos en diferentes tamaños de pantalla es permitirte hacer cosas más grandes en pantallas más pequeñas.
Ejemplo
<div class="col-lg-6 col-xs-12">
Significado: 50% de ancho en computadoras de escritorio, 100% de ancho en dispositivos móviles, tabletas y computadoras portátiles.
Tamaños del dispositivo y prefijo de clase:
- Dispositivos extra pequeños Teléfonos (<768px) -
.col-xs- - Tabletas de dispositivos pequeños (≥768px) -
.col-sm- - Dispositivos de escritorio medianos (≥992px) -
.col-md- - Dispositivos de escritorio grandes (≥1200px) -
.col-lg-
Opciones de cuadrícula:
Referencia: docs
.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up