¿Cuál es la diferencia entre col-lg- *, col-md- * y col-sm- * en Bootstrap?

¿Qué es la diferencia entre col-lg-*, col-md-*y col-sm-*en Twitter Bootstrap?

Actualizado 2019 ...

La cuadrícula Bootstrap 3 viene en 4 niveles (o "puntos de interrupción") ...

• Extra pequeño (para teléfonos inteligentes .col-xs-*)
• Pequeño (para tabletas .col-sm-*)
• Mediano (para computadoras portátiles .col-md-*)
• Grande (para computadoras portátiles / 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 están controlados por consultas de medios CSS .

Entonces, en la cuadrícula de 12 columnas de Bootstrap ...

col-sm-3tiene 3 de 12 columnas de ancho (25%) en un ancho de dispositivo pequeño típico (> 768 píxeles)

col-md-3tiene 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, smo 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, solo configure el ancho para la ventana gráfica 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>

Los niveles más grandes están implícitos. Porque col-sm-3significa 3 units on sm-and-up, a menos que sea anulado específicamente por un nivel más grande que use un tamaño diferente.

xs(predeterminado)> anulado por sm> anulado por md> anulado porlg

Combine las clases para usar el cambio de ancho de columna en diferentes tamaños de cuadrícula . Esto crea un diseño receptivo.

<div class="col-md-3 col-sm-6">..</div>

Las sm, mdy lglas redes serán todos "pila" verticalmente en pantallas / ventanas menos de 768 píxeles. Aquí es donde xsencaja la cuadrícula. Las columnas que usan las col-xs-*clases no se apilarán 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 escala de la cuadrícula.

Bootstrap 4

En Bootstrap 4 hay un nuevo -xl-tamaño, vea esta demostración . También el -xs-infija se ha eliminado , 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

Bootstrap 4 Grid Demo

Además, Bootstrap 4 incluye nuevas columnas de diseño automático . Estos también tienen puntos de interrupción sensibles ( col, col-sm, col-md, etc ..), pero no tienen anchos definidos%. Por lo tanto, las columnas de diseño automático ocupan el mismo ancho en toda la fila.

Este artículo explica más sobre la cuadrícula Bootstrap

Los documentos de bootstrap lo explican, pero aún me tomó un tiempo entenderlo. Tiene más sentido cuando me lo explico de una de dos maneras:

Si piensa en las columnas que comienzan horizontalmente, puede elegir cuándo desea que se apilen .

Por ejemplo, si comienza con columnas: ABC

Tú decides cuándo deberían apilarse para ser así:

UNA

si

C

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, las columnas se volverán horizontales cuando el ancho sea> = 768px.

Si elige col-md, 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.

De la documentación de Twitter Bootstrap :

• rejilla pequeña (≥ 768px) = .col-sm-*,
• rejilla media (≥ 992px) = .col-md-*,
• rejilla grande (≥ 1200px) = .col-lg-*.

Creo que el aspecto confuso de esto es el hecho de que BootStrap 3 es un sistema móvil de primera respuesta y no explica cómo esto afecta a la jerarquía col-xx-n en esa parte de la documentación de Bootstrap. Esto hace que te preguntes qué sucede en dispositivos más pequeños si eliges un valor para dispositivos más grandes y te preguntas si es necesario especificar varios valores. (No lo haces)

Intentaría aclarar esto afirmando que ... Los tipos de grano más bajo (xs, sm) intentan conservar 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 envolverán las columnas en dispositivos más pequeños. Los valores citados en los 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 sean col-xs-n, conservarán la apariencia correcta incluso en pantallas muy pequeñas, hasta que la ventana caiga a un tamaño 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 deben mostrar su tabla tal como la diseñó, en lugar de mostrarla en forma degradada (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 grandes, una al lado de la otra en una pantalla pequeña, las columnas se envolverán naturalmente de una manera horrible si no se tiene en cuenta. Por lo tanto, dependiendo de los datos dentro de las columnas, puede decidir el punto en el que se sacrifica el diseño 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 caiga por debajo de 992px. Esto significa que los datos aún son visibles pero requerirán desplazamiento vertical para verlos. Si no desea que su diseño se degrade, elija xs (siempre que sus datos se puedan mostrar adecuadamente en un dispositivo de menor resolución 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 usar 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 1200px.

Tamaños de dispositivo y prefijo de clase:

• Dispositivos extra pequeños Teléfonos (<768px) - .col-xs-
• Tabletas de dispositivos pequeños (≥768px) - .col-sm-
• Dispositivos medianos Computadoras de escritorio (≥992px) - .col-md-
• Dispositivos grandes Escritorios de escritorio (≥1200px) - .col-lg-

Opciones de cuadrícula:

Referencia: Sistema de cuadrícula

TL; DR

.col-X-Ymedios en el tamaño de pantalla de X y hasta , extienden este elemento para llenar columnas de Y .

Bootstrap proporciona una cuadrícula de 12 columnas por .row, entonces Y = 3 significa ancho = 25%.

xs, sm, md, lg son los tamaños para teléfonos inteligentes, tabletas, computadoras portátiles, computadoras de escritorio, respectivamente.

El objetivo de especificar diferentes anchos en diferentes tamaños de pantalla es permitirle agrandar las cosas 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.

.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 

Un caso particular: antes de aprender el sistema de cuadrícula bootstrap, asegúrese de que el zoom del navegador esté configurado al 100% (cien por ciento). Por ejemplo: si la resolución de la pantalla es (1600px x 900px) y el zoom del navegador es 175%, 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 cromado 100%

Navegador 100 por ciento: elementos colocados horizontalmente

Zoom cromado 175%

Navegador 175 por ciento: elementos apilados

¡Vamos a complicar Bootstrap!

Observe cómo col-sm ocupa el ancho del 100% (en otros términos se divide en una nueva línea) a continuación, 576pxpero col no lo hace. Puedes notar el ancho actual en el centro superior en gif.

Aquí viene el código:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

Bootstrap por defecto alinea todas las columnas (col) en una sola fila con el mismo ancho. En este caso, tres colocuparán 100% / 3 de ancho cada uno, sea cual sea el tamaño de la pantalla. Puedes notar eso en gif.

Ahora, ¿qué pasa si queremos renderizar solo una columna por línea, es decir, dar el 100% de ancho a cada columna pero solo para pantallas más pequeñas ? Ahora viene las col-xxclases!

Solía col-smporque quería dividir las columnas en líneas separadas por debajo de 576px. col-xxBootstrap proporciona estas 4 clases para diferentes dispositivos de visualización como teléfonos móviles, tabletas, computadoras portátiles, monitores grandes, etc.

Entonces, col-smse rompería por debajo de 576px, col-mdse rompería por debajo de 768px, col-lgse rompería por debajo de 992px y col-xlse rompería por debajo de 1200px

Tenga en cuenta que no hay col-xsclase en bootstrap 4.

Esto prácticamente se resume. Puedes volver a trabajar.

Pero hay un poco más de eso. Ahora viene el col-*y col-xx-*para personalizar el ancho.

Recuerde en el ejemplo anterior que mencioné eso colo col-xxtoma el mismo ancho en una fila. Entonces, si queremos dar más ancho a un específico col, podemos hacer esto.

La fila Bootstrap se divide en 12 partes, por lo que en el ejemplo anterior había 3, colpor lo que cada una toma 12/3 = 4 partes. Puede considerar estas partes como una forma de medir el ancho.

También podríamos escribir eso en formato, col-*es decir, col-4así:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

Y no habría hecho ninguna diferencia porque, por defecto, bootstrap da el mismo ancho a col(4 + 4 + 4 = 12).

Pero, ¿qué pasa si queremos dar 7 partes a la 1ra col, 3 partes a la 2da coly descansar 2 partes (12-7-3 = 2) a la 3ra col(7 + 3 + 2, entonces el total es 12), simplemente podemos hacer esto:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

y también puedes personalizar el ancho de las col-xx-*clases.

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

¿Cómo se ve en la acción?

¿Qué pasa si la suma de coles más de 12? Luego, colse desplazará / ajustará a la línea inferior. Sí, puede haber cualquier cantidad de columnas para una fila.

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

¿Qué sucede si queremos 3 columnas seguidas para pantallas grandes pero dividimos estas columnas en 2 filas para pantallas pequeñas?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

Puedes jugar por aquí: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

¡Creo que esta imagen es bastante buena para entender mejor el concepto!

Para una comprensión más detallada, vaya al siguiente enlace:

https://getbootstrap.com/docs/3.4/css/

bueno, se usa para indicar a bootstrap cuántas columnas se deben colocar en una fila dependiendo del tamaño de la pantalla

col-xs-2

mostraría solo 2 columnas seguidas en una 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, si menciona

xs-col-2 md-col-4

luego se mostrarían 2 columnas en cada fila para los tamaños de pantalla desde xs hasta sm (incluido) y cambia cuando se obtiene el siguiente tamaño, es decir, para 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