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


439

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?

13
Encontrarás una explicación aquí . Puede usar el número en la columna como lo desee, pero asegúrese de que la suma de todos los números de la columna en una misma fila debe ser igual a 12
Doan Cuong

Respuestas:


835

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.


38
También vale la pena señalar que las clases de cuadrícula para un tamaño de pantalla dado se aplican a pantallas de ese tamaño y mayores , a menos que se anulen más. Por ejemplo, .col-xs-2.col-sm-2.col-lg-7es equivalente a. col-xs-2.col-lg-7
cvrebert

55
Debe corregir su ejemplo con respecto al anidamiento. Anidar requiere que se inserte una fila en la columna en la que anida las otras columnas. No agregar una fila hará que tenga doble relleno. Para una mejor comprensión de esto, vea el diagrama en mi respuesta aquí: stackoverflow.com/questions/23899715/…
jme11

1
Muy buena explicación, gracias. Me encanta lo de envolver el .colsde .rowevitar y cacel el relleno. Siempre me preguntaba por qué usar la fila y qué diferencia hace.
Rishiraj Purohit

Pero en la documentación parece que el ancho total de divs supera más de 12, hasta 18 para 'xs'. Por favor, eche un vistazo a la sección "Mixto: móvil y escritorio" y ¿por qué? getbootstrap.com/docs/3.3/examples/grid
Michel

@Michel parece que estás malinterpretando su documentación. están mostrando dos opciones xs separadas: una para 12 columnas (ancho completo) y otra para 6 columnas (ancho medio). Verá que esas columnas también muestran lg-8 y lg-4: lo que le muestran es que abarcarán 8 y 4 columnas (2/3 + 1/3 del ancho total) en pantallas grandes, y 12 y 6 (ancho completo + 1/2 de la siguiente fila) en las pantallas del teléfono. ¡Espero que ayude!
Shawn Taylor

46

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:

Sistema de rejilla Bootstrap, col - * - 6


col-xs-*han caído en Bootstrap 4 a favor decol-*
Zohab Ali

¿Podría compartir el HTML (y posiblemente cualquier CSS)? Gracias.
NoChan

11

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.



6

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:

definiciones de tamaño de pantalla

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.