¿Cuál es la diferencia entre col-lg-* , col-md-* y col-sm-* en Twitter Bootstrap?

  • Consulte getbootstrap.com/css para el px dimensiones de cada uno.
  • que yo sé, pero no entiendo el efecto de la
  • Me parece confuso, esta cuestión ha bootstrap-3 y bootstrap-4 como una etiqueta, ya que son totalmente diferentes
InformationsquelleAutor StreetCoder | 2013-11-08

9 Comentarios

  1. 477

    Actualizado 2019…

    La Bootstrap 3 cuadrícula viene en 4 niveles (o «puntos de ruptura»)…

    • Extra pequeño (para smartphones .col-xs-*)
    • Pequeña (para las tabletas .col-sm-*)
    • Medio (para equipos portátiles .col-md-*)
    • Grandes (para los ordenadores portátiles/ordenadores de sobremesa .col-lg-*).

    Estos tamaños de cuadrícula permiten a la rejilla de control del comportamiento en diferentes anchos. Los diferentes niveles están controlados por CSS consultas de medios de comunicación.

    Así que en Bootstrap del 12 columnas en la cuadrícula…

    col-sm-3 es 3 de 12 columnas de ancho (25%) en un típico pequeño dispositivo de ancho (> 768 píxeles)

    col-md-3 es 3 de 12 columnas de ancho (25%) en un típico medio dispositivo de ancho (> 992 píxeles)


    El menor nivel (xs, sm o md) también define el tamaño para grandes anchos de pantalla. Así, para el mismo el tamaño de la columna en todos los niveles, sólo tienes que ajustar el ancho para los más pequeños de la ventanilla…

    <div class="col-lg-3 col-md-3 col-sm-3">..</div> es el mismo,

    <div class="col-sm-3">..</div>

    Mayores niveles se implícita. Porque col-sm-3 significa 3 units on sm-and-up, a menos que específicamente se reemplaza por un mayor nivel que utiliza un tamaño diferente.

    xs(predeterminado) > reemplazado por sm > reemplazado por md > reemplazado por lg


    Combinar las clases para el cambio de uso de los anchos de columna en diferentes tamaños de cuadrícula. Esto crea un diseño sensible.

    <div class="col-md-3 col-sm-6">..</div>

    La sm, md y lg rejillas de todos «pila» verticalmente en las pantallas/viewports menos de 768 píxeles. Aquí es donde la xs cuadrícula encaja. Las columnas que utilizan el col-xs-* clases no pila vertical, y continuar a escala hacia abajo en la más pequeña de las pantallas.

    Cambiar el tamaño de su navegador el uso de este demo y verás la escala de rejilla efectos.


    Bootstrap 4

    En Bootstrap 4 hay una nueva -xl- tamaño, ver esta demo. También la -xs- infix ha sido eliminado, de manera más pequeñas columnas son simplemente col-1, col-2.. col-12, etc..

    col-* – 0 (xs)

    col-sm-* – 576px

    col-md-* – 768px

    col-lg-* – 992px

    col-xl-* – 1200px

    Bootstrap 4 Cuadrícula Demo

    Además, Bootstrap 4 incluye nuevas auto-diseño de columnas. Estos también han sensible puntos de interrupción (col, col-sm, col-md, etc..), pero no se han definido % anchos. Por lo tanto, la auto-diseño de columnas de relleno igual anchura a través de la fila.


    Este artículo explica más sobre la rejilla Bootstrap

    • ¿Cuál es el efecto de anidación de col-sm dentro de un col-md? Cómo habría que modificar el comportamiento de col-sm y col-md?
    • Esto hace que el anidada sm permanecer en columnas en anchos. Pruebe usted mismo: codeply.com/go/LGyFiEJqXq
    • puede que os invito a echar un vistazo a un diseño de respuesta relacionadas con la pregunta aquí : tinyurl.com/nadfh2u ?
    • ¿Por qué es <div class="col-sm-3">..</div> la misma como <div class="col-lg-3 col-md-4 col-sm-3">..</div> y no <div class="col-lg-3 col-md-3 col-sm-3">..</div> (xx-3 para todos)?
    • Gracias.. me fijo que: <div class="col-lg-3 col-md-3 col-sm-3">..</div> es el mismo que <div class="col-sm-3">..</div>
    • Oh, ufff, bueno pensé que me faltaba algo 🙂

  2. 231

    El bootstrap docs hacer lo explique, pero todavía me tomó un tiempo para conseguirlo. Tiene más sentido cuando me lo explique a mí mismo en una de dos maneras:

    Si usted piensa que una de las columnas de partida horizontalmente, entonces usted puede elegir cuando usted quiera pila.

    Por ejemplo, si usted comienza con las siguientes columnas:
    A B C

    De decidir el momento en caso de que la pila de ser como este:

    Un

    B

    C

    Si usted elige col-lg, entonces las columnas de la pila cuando el ancho es de < 1200px.

    Si usted elige col-md, entonces las columnas de la pila cuando el ancho es de < 992px.

    Si usted elige col-sm, entonces las columnas de la pila cuando el ancho es de < 768px.

    Si usted elige col-xs, entonces las columnas nunca pila.

    Por otro lado, si se piensa en las columnas de empezar apilados, entonces usted puede elegir en qué momento se convierten en horizontal:

    Si usted elige col-sm, entonces las columnas se convierten en horizontal cuando el ancho es de >= 768px.

    Si usted elige col-md, a continuación, las columnas se convierten en horizontal cuando el ancho es de >= 992px.

    Si usted elige col-lg, entonces las columnas se convierten en horizontal cuando el ancho es de >= 1200px.

    • Esta respuesta se explica mejor. Al menos para mí lo hizo. Esto era todo lo que necesitaba saber: «Si usted elige col-lg, entonces las columnas de la pila cuando el ancho es de < 1200px.». Gracias!
    • Esta es la forma de explicar en un viaje en ascensor y aún así obtener su explicación se entiende.
    • La mejor explicación de la historia! No tenía tiempo para leer tutoriales, y su respuesta me ahorró tiempo! Gracias!
    • Sé que esto es viejo, así que no importa lo que col-* yo quiero que se de la pila, finalmente, en diferentes tamaños?
    • Esto sólo renovado mi comprensión de Bootstrap.
    • Este debe ser marcado como la respuesta!!

  3. 25

    Creo que el aspecto confuso de esto es el hecho de que BootStrap 3 es un móvil primer sistema sensible y no puede explicar cómo afecta esto a la col-xx-n de la jerarquía en que parte de la secuencia de arranque de la documentación.
    Esto hace que te preguntes lo que sucede en dispositivos más pequeños si usted elige un valor para dispositivos más grandes y hace que te preguntes si hay una necesidad para especificar varios valores. (No)

    Me gustaría intentar aclarar esta diciendo que…
    Bajar tipos de grano (xs, sm) intento de retener el diseño de la apariencia de las pantallas más pequeñas y más grandes tipos (md,lg) se muestra correctamente sólo en pantallas más grandes, pero envoltura de columnas en dispositivos más pequeños.
    Los valores citados en los ejemplos anteriores se refieren al límite en la medida en que bootstrap degrada la apariencia para adaptarse a la disposición de la pantalla de bienes raíces.

    Lo que esto significa en la práctica es que, si se las columnas col-xs-n, entonces van a retener a corregir la apariencia, incluso en pantallas muy pequeñas, hasta que la ventana las gotas de un tamaño que es tan restrictiva que la página no se puede mostrar correctamente.
    Esto significa que los dispositivos que tienen un ancho de 768px o menos debe mostrar la tabla tal y como se diseñó en lugar de degradado (sola o envuelto en forma de columna).
    Obviamente, esto depende aún de los contenidos de las columnas y ese es el punto. Si la página que intenta mostrar varias columnas de datos de gran tamaño, de lado a lado en una pequeña pantalla, a continuación, las columnas naturalmente se envuelva en una forma horrible si usted no se de cuenta de ello. Por lo tanto, dependiendo de los datos dentro de las columnas que puede decidir el punto en el que el diseño es sacificed para mostrar el contenido de manera adecuada.

    por ejemplo, Si la página contiene los tres col-sm-n columnas bootstrap envolvió las columnas en filas cuando el ancho de la página cae por debajo de 992px.
    Esto significa que los datos son todavía visibles, pero se requiere el desplazamiento vertical para verlo. Si usted no desea que su diseño para degradar, elija xs (siempre y cuando sus datos pueden ser adecuadamente visualizado en una resolución inferior del dispositivo en tres columnas)

    Si la posición horizontal de los datos es importante, entonces usted debe tratar de elegir inferior de la granularidad de los valores a conservar la naturaleza visual. Si la posición es menos importante, pero la página tiene que ser visible en todos los dispositivos, a continuación, un valor más alto debe ser utilizado.

    Si usted elige col-lg-n, entonces las columnas se muestran correctamente hasta que el ancho de la pantalla cae por debajo de la xs umbral de 1200px.

    • Supongo que esto es lo que el OP se pide (no los números en bruto), pero flameado sobre.
    • Estoy de acuerdo en que esto debe ser aceptado respuesta tal y como se indica exactamente el comportamiento de los diferentes tamaños.
  4. 8

    Los Tamaños de los dispositivos y de la clase prefijo:

    • Extra pequeños dispositivos de Teléfonos (<768px) – .col-xs-
    • Pequeños dispositivos de Tabletas (≥768px) – .col-sm-
    • Medio de dispositivos de Escritorios (≥992px) – .col-md-
    • Dispositivos grandes Escritorios (≥1200px) – .col-lg-

    Opciones de la cuadrícula:

    ¿Cuál es la diferencia entre col-lg-*, col-md-* y col-sm-* en Bootstrap?

    Referencia: El Sistema De La Red

  5. 5
    .col-xs-Extra Small     Phones Less than 768px 
    .col-sm-Small Devices   Tablets 768px and Up 
    .col-md-Medium Devices  Desktops 992px and Up 
    .col-lg-Large Devices   Large Desktops 1200px and Up 
  6. 4

    TL;DR

    .col-X-Y significa el tamaño de la pantalla X y hasta, tramo de este elemento para llenar Y columnas.

    Bootstrap proporciona un grid de 12 columnas por .row, de modo que Y=3 significa ancho=25%.

    xs, sm, md, lg son los tamaños de smartphone, tablet, portátil, de escritorio, respectivamente.

    El punto de la especificación de diferentes anchos en diferentes tamaños de pantalla es dejar de hacer las cosas más grandes en pantallas más pequeñas.

    Ejemplo

    <div class="col-lg-6 col-xs-12">

    Significado: el 50% de la anchura de los equipos de Sobremesa, el 100% de ancho en el Móvil, la Tablet y el Portátil.

  7. 1

    Un caso particular : Antes de aprender bootstrap sistema de la red, asegúrese de que el navegador de zoom se ajusta a 100% (cien por ciento). Por ejemplo : Si resolución de la pantalla es (1600px x 900px) y zoom en el navegador es de 175%, luego «bootstrap-ped» elementos serán apilados.

    HTML

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4">class="col-lg-4"</div>
            <div class="col-lg-4">class="col-lg-4"</div>
        </div>
    </div>

    Chrome zoom 100%

    Navegador 100 por ciento de los elementos colocados en forma horizontal

    Chrome zoom 175%

    Navegador de 175 por ciento apiladas elementos

  8. 0

    también se utiliza para contar bootstrap cuántas columnas se colocarán en una fila dependiendo del tamaño de la pantalla-

    col-xs-2

    mostraría sólo 2 columnas en una fila extra pequeño(xs) de la pantalla, de la misma manera como sm define una pantalla pequeña, md(de tamaño mediano), lg(de gran tamaño),
    pero de acuerdo con bootstrap más pequeñas, la primera regla, si usted menciona

    xs-col-2 md-col-4

    a continuación, 2 columnas que se mostrarán en cada fila de la pantalla de tallas desde la xs hasta sm(incluido) y los cambios cuando se obtiene el siguiente tamaño de decir, para md hasta lg(incluido)
    para una mejor comprensión de tamaños de pantalla, intente ejecutar en varios modos de pantalla en chrome developer mode(ctr+shift+i) y probar los distintos píxeles o dispositivos

Dejar respuesta

Please enter your comment!
Please enter your name here