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.
