Comprender las clases de grid (col-sm - # y col-lg -#) en Bootstrap 3

Estoy empezando con Bootstrap 3 y estoy teniendo algunos problemas para entender cómo las clases de grid están destinadas a ser utilizadas.

Esto es lo que he descubierto hasta ahora:

Parece que las clases col-sm-# y col-lg-# difieren de las anteriores col-# en que solo se aplicarán cuando las pantallas estén por encima de un cierto tamaño (768px y 992px respectivamente). Si omites el-sm - o-lg - los divs nunca se colapsarán en una columna.

Sin embargo, cuando creo dos divs dentro de una fila que son ambos col-sm-6 parece que son solo lado a lado cuando la ventana está entre 768px y 992px de ancho. En otras palabras, si encoge la ventana hasta el final y luego la ensancho lentamente, el diseño es una sola columna, luego dos columnas, luego de nuevo a una sola columna nuevamente.

  1. ¿Es este el comportamiento pretendido?
  2. Si quiero dos columnas para algo superior a 768px, ¿debo aplicar ambas clases? (<div class="col-sm-6 col-lg-6">)
  3. Debería col-6 también be incluido? <div class="col-6 col-sm-6 col-lg-6">
Author: emersonthis, 2013-08-09
Source

5 answers

[ACTUALIZAR A CONTINUACIÓN]

Eché otro vistazo a los documentos y parece que pasé por alto una sección que habla específicamente sobre esto.

Las respuestas a mis preguntas:

  1. Sí, están destinados a aplicarse solo a rangos específicos, en lugar de todo por encima de un cierto ancho.

  2. Sí, las clases están destinadas a ser combinadas.

  3. Parece que esto es apropiado en ciertos casos pero no en otros porque las clases col-# son básicamente equivalente a col-xsm - # or, anchos por encima de 0px (todos los anchos).

Aparte de leer los documentos demasiado rápido, creo que estaba confundido porque llegué a Bootstrap 3 con una mentalidad de "Bootstrap 2". Específicamente, estaba usando los estilos responsivos (opcionales) (bootstrap-responsive.css) en v2 y v3 es bastante diferente (para mejor IMO).

ACTUALIZACIÓN para la versión estable:

Esta pregunta fue escrita originalmente cuando RC1 estaba fuera. Hicieron algunos grandes cambios en RC2 por lo que para cualquiera que lea esto ahora, no todo lo mencionado anteriormente todavía se aplica.

A partir del momento en que estoy escribiendo esto, las clases col-*-# parecen aplicarse hacia arriba. Por ejemplo, si desea que un elemento sea de 12 columnas (ancho completo) para teléfonos, pero dos columnas de 6 (media página) para tabletas y más, haría algo como esto: 

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(También agregaron un punto de ruptura xs adicional después de que esta pregunta fue escrita.)

 60
Author: emersonthis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-25 15:06:41

Aquí tienes un muy buen tutorial, que explica, cómo usar las nuevas clases de grid en Bootstrap 3.

También cubre mixins, etc.

 38
Author: Srikanth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-24 09:18:23

Para modificar la respuesta de SDP anterior, no es necesario declararcol-xs-12 en <div class="col-xs-12 col-sm-6">. Bootstrap 3 es mobile-first, por lo que se asume que cada columna div es un div de 100% de ancho por defecto, lo que significa que en el tamaño "xs" es 100% de ancho, siempre tendrá ese comportamiento por defecto, independientemente de lo que establezca en sm, md, lg. Si quieres que tus columnas xs no sean 100%, entonces normalmente haces un col-xs-(1-11).

 5
Author: helloerik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-21 21:02:44

" Si quiero dos columnas para algo superior a 768px, ¿debo aplicar ambas clases?"

Esto debería ser tan simple como: 

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

No hay necesidad de añadir el col-lg-6 también.

Demo: http://www.bootply.com/73119

 4
Author: Zim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-09 13:53:14

La mejor manera de entender es simplemente pensar de arriba a abajo (Grandes Escritorios para Teléfonos móviles)

En primer lugar, como B3 es móvil primero, por lo que si usa xs, las columnas serán las mismas desde escritorios grandes a xs (recomiendo usar xs o sm, ya que esto mantendrá todo de la manera que desee en cada tamaño de pantalla )

En segundo lugar, si desea dar un ancho diferente a las columnas en diferentes dispositivos o resoluciones, puede agregar varias clases, por ejemplo

La voluntad anterior cambie el ancho de acuerdo con las resoluciones de pantalla, RECUERDE que estoy manteniendo el total de columnas en cada clase = 12

¡Espero que mi respuesta ayude!

 4
Author: Aslam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-03 08:47:32