css - columns - col-sm bootstrap

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

Question

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 grillas?
2. ¿Cómo usar estos números?
3. ¿Qué representan realmente?

Answer 1

El sistema de rejilla Bootstrap tiene cuatro clases:
xs (para telefonos)
sm (para tabletas)
md (para escritorios)
lg (para escritorios más grandes)

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

Sugerencia: Cada clase se amplía, 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 medio ≥ 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-xs está apuntando al elemento cuando la ventana es más pequeña que 768px (dispositivos móviles probables) ...

También creé la imagen a continuación para mostrar cómo funciona el sistema de cuadrícula, en estos ejemplos 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 respondiendo al tamaño de la ventana:

Answer 2

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-* .

Leer más ...

Answer 3

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 del escritorio y en las pantallas del teléfono, coloque dos clases de col-md-6 y dos de 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 apiladas una encima de la otra), coloque two col-md-6 y dos col-xs-12 en sus columnas y porque suma serán 24 y se apilarán automáticamente uno encima del otro, o simplemente dejarán el estilo xs .

Answer 4

Ignorando las letras (x s , sm , md , lg ) por ahora , comenzaré 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-*-6 abarca 6 de 12 columnas (la mitad del ancho), col-*-12 abarca 12 de 12 columnas (el ancho completo), etc.

Entonces, si quieres que dos columnas iguales abarquen un div, escribe

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

Si desea que tres columnas desiguales abarquen el 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 hay más de 12, ya que tus divs ofensivos saltarán a la siguiente fila (no .row , que es otra historia en total) .

También puede anidar columnas dentro de columnas , (mejor con un envoltorio .row 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 div anidados también abarca hasta 12 columnas de su div principal. NOTA: Ya que cada clase .col tiene un relleno de .col en cada lado, normalmente debe envolver las columnas anidadas en una .row , que tiene márgenes de -15 px. Esto evita duplicar el relleno y mantiene el contenido alineado entre las clases de colores 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 utilizan para definir a qué tamaño de pantalla se debe aplicar 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 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 múltiples 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-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).

<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 a continuación, las clases de cuadrícula para un tamaño de pantalla determinado se aplican a ese tamaño de pantalla y más grandes a menos que otra declaración lo anule (es decir, col-xs-6 col-md-4 abarca 6 columnas en xs y sm , y 4 columnas en md y lg , aunque sm y lg nunca se declararon explícitamente)

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

NOTA: en realidad está totalmente bien si su .row incluye 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.

Answer 5

Aqui tienes

col-lg-2: si la pantalla es grande ( lg ), este componente tomará espacio de 2 elementos considerando que toda la fila puede caber 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 ), entonces este componente tomará espacio de 6 elementos considerando que toda la fila puede caber 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: