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

, Ignorando las letras (xs, sm, md, lg) por ahora, voy a empezar 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 (todo el ancho), etc

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

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

De si quieres tres columnas desiguales para abarcar ese mismo ancho, podrías 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 suman 12. Puede ser menos de doce, pero ten cuidado si es más de 12, ya que tus divs ofensores bajarán a la siguiente fila (no .row, que es otra historia en conjunto).

También puedes anidar columnas dentro de columnas , (mejor con una envoltura .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 los divs anidados también abarcan hasta 12 columnas de su div padre. NOTA: Dado que cada clase .col tiene un relleno de 15px a cada lado, generalmente debe envolver las columnas anidadas en un .row, que tiene márgenes de-15px. Esto evita duplicar el relleno, y mantiene el contenido alineado entre las clases col anidadas y no anidadas.

Specifically No preguntaste específicamente sobre el uso 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 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 "Rejilla Opciones " capítulo de la documentación oficial de Bootstrap para más detalles.

Debería normalmente clasificar un div usando múltiples clases de columna para que se comporte de manera diferente dependiendo del tamaño de la pantalla (este es el corazón de lo que hace que bootstrap sea responsivo). 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 las 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 dado se aplican a ese tamaño de pantalla y mayor 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 fueron declarados explícitamente)

NOTA: si no defines xs, por defecto será col-xs-12 (es decir, col-sm-6 es la mitad del ancho en sm, md y lg pantallas, pero de ancho completo en xs pantallas).

NOTA: en realidad está totalmente bien si su .row incluye más de 12 Cols, mientras sepa cómo reaccionarán. -- Este es un tema polémico, y no todos están de acuerdo.