Significado de los números en “col-md-4”, “col-xs-1”, “col-lg-2” en Bootstrap

Estoy confundido con el sistema de cuadrícula en el nuevo Bootstrap, particularmente estas clases:

col-lg-* col-md-* col-xs-* 

(donde * representa algún número).

¿Alguien puede explicar lo siguiente?

  1. ¿Cómo ese número está alineando las cuadrículas?
  2. ¿Cómo usar estos números?
  3. ¿Qué representan en realidad?

Ignorando las letras (x s , sm , md , lg ) por ahora , comenzaré con solo los números …

  • los números (1-12) representan una porción del ancho total de cualquier div
  • todos los divs están divididos en 12 columnas
  • entonces, col-*-6 abarca 6 de 12 columnas (la mitad del ancho), col-*-12 abarca 12 de 12 columnas (todo el ancho), etc.

Entonces, si quieres dos columnas iguales para abarcar un div, escribe

 
Column 1
Column 2

De si quieres tres columnas desiguales para abarcar el mismo ancho, podrías escribir:

 
Column 1
Column 2
Column 3

Notarás que el número de columnas siempre sum 12. Puede ser menos de doce, pero ten cuidado si hay más de 12, ya que tus divs ofensivos bajarán a la siguiente fila (no .row , que es otra historia) .

También puede anidar columnas dentro de las columnas , (lo mejor con un contenedor .row alrededor) como:

 
Column 1-a
Column 1-b
Column 2-a
Column 2-b

Cada conjunto de divs nesteds también abarca hasta 12 columnas de su div principal. NOTA: dado que cada clase .col tiene un relleno de 15px en cada lado, generalmente debe envolver las columnas anidadas en .row , que tiene márgenes de -15px. Esto evita duplicar el relleno y mantiene el contenido alineado entre clases col anidadas y no anidadas.

– No preguntaste específicamente sobre el uso de xs, sm, md, lg , pero van de la mano, así que no puedo evitar tocarlo …

En resumen, se usan para definir a qué tamaño de pantalla debe aplicar esa clase:

  • xs = pantallas extrapequeñas (teléfonos móviles)
  • sm = pantallas pequeñas (tabletas)
  • md = pantallas medianas (algunos equipos de escritorio)
  • lg = pantallas grandes (escritorios restantes)

Lea el capítulo ” Opciones de cuadrícula ” de la documentación oficial de Bootstrap para obtener más detalles.

Por lo general, debe clasificar un div mediante varias clases de columnas, de modo que se comporte de manera diferente según el tamaño de la pantalla (este es el núcleo de lo que hace que el bootstrap responda). por ejemplo: un div con clases col-xs-6 y col-sm-4 abarcará la mitad de la pantalla en el teléfono móvil (xs) y 1/3 de la pantalla en tabletas (sm).

 
Column 1
Column 2

NOTA: según el comentario siguiente, las clases de cuadrícula para un tamaño de pantalla dado se aplican a ese tamaño de pantalla y más grande a menos que otra statement lo anule (es decir col-xs-6 col-md-4 abarca 6 columnas en xs y sm , y 4 columnas en md y lg , a pesar de que sm y lg nunca fueron declarados explícitamente)

NOTA: si no define xs , se convertirá en col-xs-12 (es decir, col-sm-6 es la mitad del ancho en las pantallas sm , md y lg , pero de ancho completo en las pantallas xs ).

NOTA: de hecho, está totalmente bien si .row incluye más de 12 cols, siempre que sepa cómo reactjsrán. – Este es un tema polémico, y no todos están de acuerdo.

El sistema de grilla Bootstrap tiene cuatro clases:
xs (para teléfonos)
sm (para tabletas)
md (para computadoras de escritorio)
lg (para escritorios más grandes)

Las clases anteriores se pueden combinar para crear diseños más dynamics y flexibles.

Consejo: cada clase aumenta, por lo que si desea establecer los mismos anchos para xs y sm, solo necesita especificar xs.

OK, la respuesta es fácil, pero sigue leyendo:

col-lg- significa columna grande ≥ 1200px
col-md- significa medio de columna ≥ 992px
col-xs- significa columna extra pequeña ≥ 768px

Los números de píxel son los puntos de corte, por lo que col-xs se dirige al elemento cuando la ventana es más pequeña que 768px (probablemente dispositivos móviles) …

También creé la imagen a continuación para mostrar cómo funciona el sistema de cuadrícula, en este ejemplo los uso con 3, como col-lg-6 para mostrar cómo funciona el sistema de cuadrícula en la página, mire cómo lg , md y xs son sensible al tamaño de la ventana:

Sistema de rejilla Bootstrap, col - * - 6

De la documentación de Twitter Bootstrap :

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

Leer más …

El punto principal es este:

col-lg-* col-md-* col-xs-* col-sm define cuántas columnas habrá en estos diferentes tamaños de pantalla.

Ejemplo: si desea que haya dos columnas en las pantallas de escritorio y en las pantallas del teléfono, coloque dos clases col-md-6 y dos col-xs-6 en sus columnas.

Si desea que haya dos columnas en las pantallas de escritorio y solo una columna en las pantallas del teléfono (es decir, dos filas astackdas una encima de la otra), coloca two col-md-6 y dos col-xs-12 en sus columnas y porque sum serán 24, se astackrán automáticamente uno encima del otro, o simplemente dejarán el estilo xs .

Aqui tienes

col-lg-2: si la pantalla es grande ( lg ), este componente ocupará el espacio de 2 elementos ya que toda la fila puede contener 12 elementos (para que veas que en la pantalla grande este componente ocupa el 16% del espacio de una fila)

col-lg-6: si la pantalla es grande ( lg ), este componente ocupará un espacio de 6 elementos ya que toda la fila puede contener 12 elementos; cuando se aplica, verá que el componente ha ocupado la mitad del espacio disponible en la fila.

La regla anterior solo se aplica cuando la pantalla es grande. cuando la pantalla es pequeña, esta regla se descarta y solo se muestra un componente por fila.

La imagen inferior muestra varios anchos de tamaño de pantalla:

definiciones de tamaño de pantalla