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 realmente?

Solo se aplica a Bootstrap 3.

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

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

Entonces, si desea que dos columnas iguales abarquen un div, escriba

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

O, si desea que tres columnas desiguales abarquen ese mismo ancho, podría escribir:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

Notarás que el número de columnas siempre suma 12. Pueden ser menos de doce, pero ten cuidado si son más de 12, ya que tus divisiones ofensivas pasarán a la siguiente fila (no .row, que es otra historia en total).

También puede anidar columnas dentro de columnas , (mejor con un .rowenvoltorio alrededor de ellas) como:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

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

- No preguntaste específicamente sobre el xs, sm, md, lguso, pero van de la mano, así que no puedo evitar tocarlo ...

En resumen, se utilizan para definir en qué tamaño de pantalla debe aplicarse esa clase:

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

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

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

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

NOTA: según el comentario más abajo, las clases de rejilla para un tamaño de pantalla concreto que se aplican a tamaño de pantalla y más grande a menos que otra declaración anulaciones de ella (es decir col-xs-6 col-md-4palmos 6 columnas en xs ysm , y 4 columnas en md ylg , a pesar de que smy lgnunca fueron declarados explícitamente)

NOTA: Si no se define xs, se usará por defecto col-xs-12(es decir, col-sm-6es la mitad de la anchura de sm, mdy lgpantallas, pero de ancho completo en xspantallas).

NOTA: en realidad está totalmente bien si .rowincluye más de 12 cols, siempre y cuando sepa cómo reaccionarán. - Este es un tema polémico, y no todos están de acuerdo.

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

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

Consejo: cada clase se escala, 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 columna mediana ≥ 992px
col-xs- significa columna extra pequeña≥ 768px

Los números de píxeles son los puntos de interrupción, por lo que, por ejemplo, col-xsse dirige al elemento cuando la ventana es más pequeña que 768px (probablemente dispositivos móviles) ...

También creé la imagen de abajo para mostrar cómo funciona el sistema de rejilla, en estos ejemplos los utilizo con 3, al igual col-lg-6que le muestre cómo funciona el sistema de red en la página, vistazo a la forma lg, mdy xsson sensibles al tamaño de ventana:

El punto principal es este:

col-lg-* col-md-* col-xs-* col-sm defina 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 col-md-6y dos col-xs-6clases 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 apiladas una encima de la otra), coloque two col-md-6dos col-xs-12en sus columnas y como la suma será 24, se apilarán automáticamente encima de cada una otro, o simplemente deja de lado el xsestilo.

De la documentación de Twitter Bootstrap :

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

Leer más ...

Aqui tienes

col-lg-2: si la pantalla es grande ( lg ), este componente ocupará espacio de 2 elementos, considerando que toda la fila puede caber en 12 elementos (por lo que verá 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á espacio de 6 elementos, considerando que toda la fila puede caber en 12 elementos; cuando se aplique, 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 de abajo muestra varios anchos de tamaño de pantalla: