Qual é a diferença entre col-lg- *, col-md- * e col-sm- * no Bootstrap?

Qual é a diferença entre col-lg-*, col-md-*e col-sm-*no Twitter Bootstrap?

Atualizado 2019 ...

A grade do Bootstrap 3 vem em 4 camadas (ou "pontos de interrupção") ...

• Extra pequeno (para smartphones .col-xs-*)
• Pequeno (para tablets .col-sm-*)
• Médio (para laptops .col-md-*)
• Grande (para laptops / desktops .col-lg-*).

Esses tamanhos de grade permitem controlar o comportamento da grade em diferentes larguras. As diferentes camadas são controladas por consultas de mídia CSS .

Assim, na grade de 12 colunas do Bootstrap ...

col-sm-3tem 3 de 12 colunas de largura (25%) em uma largura típica de dispositivo pequeno (> 768 pixels)

col-md-3tem 3 de 12 colunas de largura (25%) em uma largura média típica de dispositivo (> 992 pixels)

A camada menor ( xs, smou md) também define o tamanho para larguras de tela maiores . Portanto, para a mesma coluna de tamanho em todas as camadas, defina a largura para a menor janela de visualização ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> é o mesmo que,

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

Camadas maiores estão implícitas. Porque col-sm-3significa 3 units on sm-and-up, a menos que especificamente substituído por uma camada maior que use um tamanho diferente.

xs(padrão)> substituído por sm> substituído por md> substituído porlg

Combine as classes para usar as larguras das colunas alteradas em diferentes tamanhos de grade . Isso cria um layout responsivo.

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

As grades sm, mde lgserão "empilhadas" verticalmente em telas / viewports com menos de 768 pixels. É aqui que a xsgrade se encaixa. As colunas que usam as col-xs-*classes não serão empilhadas verticalmente e continuarão sendo reduzidas nas telas menores.

Redimensione seu navegador usando esta demonstração e você verá os efeitos de escala da grade.

Bootstrap 4

No Bootstrap 4, há um novo -xl-tamanho, veja esta demonstração . Além disso, o -xs-infixa foi removido , de modo mais pequenas colunas são simplesmente col-1, col-2.. col-12, etc ..

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Demonstração do Bootstrap 4 Grid

Além disso, o Bootstrap 4 inclui novas colunas de layout automático . Estes também têm pontos de interrupção responsivos ( col, col-sm, col-md, etc ..), mas não têm% larguras definidas. Portanto, as colunas de layout automático preenchem a mesma largura na linha.

Este artigo explica mais sobre a grade do Bootstrap

Os documentos de inicialização explicam isso, mas ainda demorei um pouco para obtê-lo. Faz mais sentido quando eu explico para mim mesmo de uma de duas maneiras:

Se você pensar nas colunas iniciando horizontalmente, poderá escolher quando deseja que elas sejam empilhadas .

Por exemplo, se você começar com as colunas: ABC

Você decide quando eles devem ser empilhados para ficar assim:

UMA

B

C

Se você escolher col-lg, as colunas serão empilhadas quando a largura for <1200px.

Se você escolher col-md, as colunas serão empilhadas quando a largura for <992px.

Se você escolher col-sm, as colunas serão empilhadas quando a largura for <768px.

Se você escolher col-xs, as colunas nunca serão empilhadas.

Por outro lado, se você pensar nas colunas começando empilhadas, poderá escolher em que ponto elas se tornam horizontais :

Se você escolher col-sm, as colunas se tornarão horizontais quando a largura for> = 768px.

Se você escolher col-md, as colunas se tornarão horizontais quando a largura for> = 992px.

Se você escolher col-lg, as colunas se tornarão horizontais quando a largura for> = 1200px.

Na documentação do Twitter Bootstrap :

• grade pequena (≥ 768px) = .col-sm-*,
• grade média (≥ 992px) = .col-md-*,
• grade grande (≥ 1200px) = .col-lg-*.

Acho que o aspecto confuso disso é o fato de o BootStrap 3 ser um primeiro sistema móvel responsivo e não explicar como isso afeta a hierarquia col-xx-n naquela parte da documentação do Bootstrap. Isso faz você se perguntar o que acontece em dispositivos menores se você escolher um valor para dispositivos maiores e se perguntar se há necessidade de especificar vários valores. (Você não)

Eu tentaria esclarecer isso afirmando que ... Tipos de grãos mais baixos (xs, sm) tentam manter a aparência do layout em telas menores e tipos maiores (md, lg) serão exibidos corretamente apenas em telas maiores, mas envolverão colunas em dispositivos menores. Os valores citados nos exemplos anteriores referem-se ao limite em que a autoinicialização degrada a aparência para se adequar ao estado da tela disponível.

O que isso significa na prática é que, se você criar as colunas col-xs-n, elas manterão a aparência correta, mesmo em telas muito pequenas, até que a janela caia para um tamanho tão restritivo que a página não possa ser exibida corretamente. Isso deve significar que os dispositivos com uma largura de 768px ou menos devem exibir sua tabela conforme você a projetou, e não em degradado (coluna única ou agrupada). Obviamente, isso ainda depende do conteúdo das colunas e esse é o ponto. Se a página tentar exibir várias colunas de dados grandes, lado a lado em uma tela pequena, as colunas serão naturalmente quebradas de uma maneira horrível, se você não prestar contas. Portanto, dependendo dos dados nas colunas, você pode decidir o ponto em que o layout é oferecido para exibir o conteúdo adequadamente.

Por exemplo, se sua página contiver três colunas col-sm-n, o bootstrap agrupará as colunas em linhas quando a largura da página cair abaixo de 992px. Isso significa que os dados ainda estão visíveis, mas exigirá rolagem vertical para visualizá-los. Se você não deseja que seu layout seja degradado, escolha xs (desde que seus dados possam ser exibidos adequadamente em um dispositivo de resolução mais baixa em três colunas)

Se a posição horizontal dos dados for importante, tente escolher valores mais baixos de granularidade para manter a natureza visual. Se a posição é menos importante, mas a página deve estar visível em todos os dispositivos, um valor mais alto deve ser usado.

Se você escolher col-lg-n, as colunas serão exibidas corretamente até que a largura da tela fique abaixo do limite xs de 1200px.

Tamanhos do dispositivo e prefixo da classe:

• Aparelhos pequenos demais Telefones (<768px) - .col-xs-
• Tablets para dispositivos pequenos (≥768px) - .col-sm-
• Dispositivos médios Desktops (≥992px) - .col-md-
• Grandes dispositivos Desktops (≥ 1200px) - .col-lg-

Opções de grade:

Referência: Sistema de Grade

TL; DR

.col-X-Ymeios no tamanho da tela e X-se , esticar este elemento para encher colunas Y .

O Bootstrap fornece uma grade de 12 colunas por .row, portanto, Y = 3 significa largura = 25%.

xs, sm, md, lg são os tamanhos para smartphone, tablet, laptop, desktop, respectivamente.

O objetivo de especificar larguras diferentes em diferentes tamanhos de tela é permitir que você faça coisas maiores em telas menores.

Exemplo

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

Significado: largura de 50% nos computadores, largura de 100% no celular, tablet e laptop.

.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 

Um caso específico: antes de aprender o sistema de grade de autoinicialização, verifique se o zoom do navegador está definido como 100% (cem por cento). Por exemplo: Se a resolução da tela for (1600px x 900px) e o zoom do navegador for 175%, os elementos "bootstrap-ped" serão empilhados.

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>

Zoom do Chrome 100%

Navegador 100% - elementos posicionados horizontalmente

Zoom do Chrome 175%

Navegador 175% - elementos empilhados

Vamos descomplicar o Bootstrap!

Observe como a coluna ocupa a largura de 100% (em outros termos, quebra em uma nova linha) abaixo, 576pxmas a coluna não. Você pode notar a largura atual no centro superior em gif.

Aí vem o código:

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

Por padrão, o Bootstrap alinha todas as colunas (col) em uma única linha com a mesma largura. Nesse caso, três colocuparão 100% / 3 de largura cada, independentemente do tamanho da tela. Você pode notar isso em gif.

Agora, e se quisermos renderizar apenas uma coluna por linha, ou seja, fornecer 100% de largura para cada coluna, mas apenas para telas menores ? Agora vem as col-xxaulas!

Eu usei col-smporque queria dividir as colunas em linhas separadas abaixo de 576px. Essas 4 col-xxclasses são fornecidas pelo Bootstrap para diferentes dispositivos de exibição, como celulares, tablets, laptops, monitores grandes etc.

Então, col-smficaria abaixo de 576px, col-mdficaria abaixo de 768px, col-lgficaria abaixo de 992px e col-xlficaria abaixo de 1200px

Observe que não há col-xsclasse no bootstrap 4.

Isso praticamente resume. Você pode voltar ao trabalho.

Mas há um pouco mais. Agora vem o col-*e col-xx-*para personalizar a largura.

Lembre-se, no exemplo acima, mencionei isso colou col-xxocupa a mesma largura em uma linha. Portanto, se queremos dar mais largura a um específico col, podemos fazer isso.

A linha de bootstrap é dividida em 12 partes; portanto, no exemplo acima, havia 3, de colmodo que cada uma ocupa 12/3 = 4 partes. Você pode considerar essas peças como uma maneira de medir a largura.

Também poderíamos escrever isso em formato, col-*ou seja, col-4assim:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

E isso não faria diferença porque, por padrão, o bootstrap fornece largura igual a col(4 + 4 + 4 = 12).

Mas, e se quisermos dar 7 partes para a 1ª col, 3 partes para a 2ª cole descansar 2 partes (12-7-3 = 2) para 3ª col(7 + 3 + 2 para que o total seja 12), podemos simplesmente fazer o seguinte:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

e você também pode personalizar a largura das col-xx-*classes.

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

Como fica a ação?

E se a soma de colfor maior que 12? Em seguida, o colbotão irá mudar / ajustar para a linha abaixo. Sim, pode haver qualquer número de colunas para uma linha!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

E se quisermos 3 colunas seguidas para telas grandes, mas dividirmos essas colunas em 2 linhas para telas pequenas?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

Você pode brincar por aqui: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Eu acho que essa imagem é muito boa para entender melhor o conceito!

para uma compreensão mais detalhada, acesse o link abaixo:

https://getbootstrap.com/docs/3.4/css/

bem, é usado para dizer ao bootstrap quantas colunas devem ser colocadas em uma linha, dependendo do tamanho da tela -

col-xs-2

mostraria apenas 2 colunas em uma tela extra pequena (xs), da mesma forma que sm define uma tela pequena, md (tamanho médio), lg (tamanho grande), mas de acordo com a primeira regra menor de inicialização, se você mencionar

xs-col-2 md-col-4

em seguida, duas colunas serão mostradas em cada linha para tamanhos de tela de xs até sm (incluído) e serão alteradas quando chegar ao próximo tamanho, ou seja, de md até lg (incluído) para uma melhor compreensão dos tamanhos de tela, tente executá-los em vários modos de tela em modo de desenvolvedor do chrome (ctr + shift + i) e tente vários pixels ou dispositivos