html - ejemplos - Comprender las clases de cuadrícula(col-sm-#y col-lg-#) en Bootstrap 3

bootstrap tutorial

Question

Estoy comenzando con Bootstrap 3 y estoy teniendo problemas para entender cómo se usan las clases de grillas.

Esto es lo que he descubierto hasta ahora:

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

Sin embargo, cuando creo dos divs dentro de una fila que son col-sm-6 , parece que solo están uno al lado del otro cuando la ventana tiene entre 768px y 992px de ancho. En otras palabras, si reduzco la ventana completamente y luego la amplío lentamente, el diseño es de una sola columna, luego de dos columnas y luego vuelve a una sola columna.

1. ¿Es este el comportamiento previsto?
2. Si quiero dos columnas para algo más de 768px, ¿debo aplicar ambas clases? ( <div class="col-sm-6 col-lg-6"> )
3. ¿Debería incluirse col-6 también ? <div class="col-6 col-sm-6 col-lg-6">

Answer 1

"Si quiero dos columnas para algo más de 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 es necesario agregar col-lg-6 también.

Demostración: http://www.bootply.com/73119

Answer 2

La mejor manera de entender es simplemente pensar de arriba a abajo (Grandes escritorios a teléfonos móviles)

En primer lugar, como B3 es móvil primero, entonces si usa xs, las columnas serán las mismas desde escritorios grandes a xs (recomiendo usar xs o sm, ya que esto mantendrá todo lo 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, entonces puede agregar múltiples clases, por ejemplo

lo anterior cambiará 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!

Answer 3

Para enmendar la respuesta anterior de SDP, NO es necesario declarar col-xs-12 en <div class="col-xs-12 col-sm-6"> . Bootstrap 3 es móvil primero, por lo que se supone que cada columna div es un div de ancho del 100% por defecto, lo que significa que en el tamaño "xs" es 100% de ancho, siempre tendrá ese comportamiento independientemente de lo que establezca sm, md, lg . Si quiere que sus columnas xs no sean 100%, entonces normalmente hace una col-xs-(1-11) .

Answer 4

Here tiene un tutorial muy bueno, que explica cómo usar las nuevas clases de grillas en Bootstrap 3.

También cubre mezclas, etc.

Answer 5

[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 únicamente a rangos específicos, en lugar de a todo lo que supere 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 de color son básicamente equivalentes a col-xsm- # o, anchos por encima de 0px (todos los anchos).

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

ACTUALIZACIÓN para la versión estable:

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

A partir de cuando estoy escribiendo esto, las clases col-*-# parecen aplicarse hacia arriba. Por ejemplo, si quiere que un elemento tenga 12 columnas (ancho completo) para teléfonos, pero dos columnas 6 (media página) para tabletas y arriba, 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 x adicional después de escribir esta pregunta).