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


85

Estoy comenzando con Bootstrap 3 y tengo algunos problemas para comprender cómo se deben usar las clases de cuadrícula.

Esto es lo que he descubierto hasta ahora:

Parece que las clases col-sm-#y col-lg-#difieren de las antiguas col-#en que solo se aplicarán cuando las pantallas superen un cierto 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 ambos 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 reducir la ventana todo el camino hacia abajo y luego, lentamente, ensancharlo, el diseño es sola columna, y dos columnas, luego de vuelta a una sola columna de nuevo .

  1. ¿Es este el comportamiento previsto?
  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 incluirse col-6 también ?<div class="col-6 col-sm-6 col-lg-6">

Lea la tabla: getbootstrap.com/css/#grid # 1 - Es el comportamiento previsto porque se usa @mediapara tamaños específicos. # 2 y # 3 sí, lea 'Ejemplo: combinación de dispositivos móviles con computadoras de escritorio' y 'Ejemplo: dispositivos móviles, tabletas y computadoras de escritorio'
RaphaelDDL

@RaphaelDDL Gracias. Lo descubrí poco después de publicarlo. Creo que esperaba que la v3 se comportara como "bootstrap-responsive.css" de la v2 y ese no es el caso.
emersonthis

Respuestas:


60

[ACTUALIZAR ABAJO]

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 lo que supere un cierto ancho.

  2. Sí, las clases están diseñadas para combinarse.

  3. Parece que esto es apropiado en ciertos casos pero no en otros porque las clases col- # son básicamente equivalentes a col-xsm- # o anchos superiores a 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 mejor en mi opinión).

ACTUALIZAR para versión estable:

Esta pregunta se escribió originalmente cuando RC1 estaba disponible. Hicieron algunos cambios importantes en RC2, por lo que para cualquiera que lea esto ahora, no todo lo mencionado anteriormente todavía se aplica.

En el momento en que estoy escribiendo esto, las col-*-#clases parecen aplicarse hacia arriba. Entonces, por ejemplo, si desea que un elemento tenga 12 columnas (ancho completo) para teléfonos, pero dos 6 columnas (media página) para tabletas y más, debe hacer 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 interrupción xs adicional después de que se escribió esta pregunta).


El hipervínculo parece apuntar a una página inexistente actualmente. No estoy seguro de si debería actualizarse para que apunte al enlace que @RaphaelDDL proporcionó anteriormente, getbootstrap.com/css/#grid , ¿o algún otro enlace?
Jon Schneider

Gracias por la pregunta y la respuesta. No soy un tipo de CSS, y la configuración de la cuadrícula también me resultó confusa al principio. Pero si lo que está diciendo es cierto, parece mejor usar xs y dejar que todo se aplique hacia arriba.
Mike Purcell

39

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

También cubre mixins, etc.


2
El enlace del blog describe la cuadrícula de Bootstrap 3 en detalle, incluidas las 4 clases de tamaño, como col-xs- *. Tiene buenos ejemplos de código.
Catto

2
Es muy bueno, especialmente su estilo de animarte constantemente a perseverar; "¿Útil, verdad? ¿No? ¿No lo sé? ¡Sigamos!" además de explicar las cosas en oraciones adecuadas: "Esto básicamente dice" mantenme en un ancho de 6 columnas hasta el tamaño del teléfono, nunca me cambies al diseño móvil apilado "" . Gracias por publicar
slugmandrew

5

"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 es necesario agregar el col-lg-6también.

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


Por razones que aún no puedo explicar, no me está funcionando de esta manera. .col-sm-6solo parece aplicarse a ese rango específico de anchos (no todo lo anterior)
emersonthis

5

La mejor manera de entenderlo es simplemente pensar de arriba a abajo (desde grandes escritorios hasta teléfonos móviles)

En primer lugar, como B3 es móvil primero, si usa xs, las columnas serán las mismas desde los escritorios grandes hasta 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

lo anterior cambiará el ancho de acuerdo con las resoluciones de pantalla, RECUERDA que estoy manteniendo el total de columnas en cada clase = 12

¡Espero que mi respuesta ayude!


5

Para enmendar la respuesta de SDP anterior, NO es necesario que declare col-xs-12en <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% de forma predeterminada, lo que significa que en el tamaño "xs" tiene un ancho del 100%, siempre tendrá ese comportamiento de forma predeterminada, independientemente de lo que establezca en sm, md, lg. Si desea que sus xscolumnas no sean del 100%, normalmente debe hacer un col-xs-(1-11).


0

Esto podría ser tarde ya que creo que la mayoría de nosotros estamos usando BS4. Este artículo explicó todas las preguntas que hizo de una manera detallada y sencilla, también incluye qué hacer y cuándo. La guía detallada para usar bs4 obootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7


considere poner la información relevante de su enlace en el espacio provisto para la respuesta.
sábado

La única razón por la que incluí el enlace fue que fue útil para mí comenzar a leer el artículo desde arriba. Ahí es cuando tiene sentido.
AAA
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.