Significado dos números em "col-md-4", "col-xs-1", "col-lg-2" no Bootstrap


439

Estou confuso com o sistema de grade no novo Bootstrap, particularmente estas classes:

col-lg-*
col-md-*
col-xs-*

(onde * representa algum número).

Alguém pode explicar o seguinte:

  1. Como esse número está alinhando as grades?
  2. Como usar esses números?
  3. O que eles realmente representam?

13
Você encontrará uma explicação aqui . Você pode usar o número na coluna como quiser, mas certifique-se de que a soma dos números todos de coluna em uma mesma linha deve ser igual a 12
Doan Cuong

Respostas:


835

Aplica-se apenas ao Bootstrap 3.

Ignorando as letras (x s , sm , md , lg ) por enquanto , começarei com apenas os números ...

  • os números (1-12) representam uma parte da largura total de qualquer div
  • todas as divs são divididas em 12 colunas
  • portanto, col-*-6abrange 6 de 12 colunas (metade da largura), col-*-12abrange 12 de 12 colunas (toda a largura), etc.

Portanto, se você quiser duas colunas iguais para abranger uma div, escreva

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Ou, se você quiser que três colunas desiguais abranjam a mesma largura, escreva:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

Você notará que o número de colunas sempre soma 12. Pode ser menor que doze, mas tenha cuidado se for maior que 12, pois seus divs ofensivos serão exibidos na próxima linha (não .row, que é outra história).

Você também pode aninhar colunas dentro de colunas (melhor com um .rowinvólucro ao seu redor), como:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Cada conjunto de divs aninhados também abrange até 12 colunas da div pai. NOTA: Como cada .colclasse possui preenchimento de 15 pixels em ambos os lados, você deve agrupar colunas aninhadas em um.row agrupar , com margens de -15px. Isso evita a duplicação do preenchimento e mantém o conteúdo alinhado entre as classes de colunas aninhadas e não aninhadas.

- Você não perguntou especificamente sobre o xs, sm, md, lguso, mas eles andam de mãos dadas, então não posso deixar de tocá-lo ...

Em resumo, eles são usados ​​para definir em qual tamanho de tela essa classe deve ser aplicada:

  • xs = telas pequenas extras (telefones celulares)
  • sm = telas pequenas (tablets)
  • md = telas médias (alguns desktops)
  • lg = telas grandes (áreas de trabalho restantes)

Leia o " Opções da Grade " capítulo da documentação oficial Bootstrap para mais detalhes.

Normalmente, você deve classificar uma div usando várias classes de coluna, para que ela se comporte de maneira diferente, dependendo do tamanho da tela (este é o coração do que torna o bootstrap responsivo). por exemplo: uma div com classes col-xs-6e col-sm-4ocupará metade da tela no celular (xs) e 1/3 da tela em tablets (sm).

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

NOTA: como por comentário abaixo, aulas de grade para um determinado tamanho de ecrã se aplicam a esse tamanho de tela e maior a menos que outra declaração substituições ele (ou seja col-xs-6 col-md-4vãos 6 colunas sobre xs esm , e 4 colunas sobre md elg , embora sme lgnunca mais foram explicitamente declarado)

NOTA: se você não definir xs, o padrão será col-xs-12(ou seja, col-sm-6é metade da largura on sm, mde lgtelas, mas de largura total em xstelas).

OBSERVAÇÃO: é realmente muito bom se você .rowincluir mais de 12 cols, desde que você saiba como elas reagirão. - Esta é uma questão controversa, e nem todos concordam.


38
Também é importante notar que as classes de grade para um determinado tamanho de tela se aplicam a telas com esse tamanho e maiores , a menos que sejam substituídas. Por exemplo, .col-xs-2.col-sm-2.col-lg-7é equivalente a. col-xs-2.col-lg-7
cvrebert

5
Você precisa fazer uma correção no seu exemplo em relação ao aninhamento. O aninhamento exige que uma linha seja inserida na coluna na qual você está aninhando as outras colunas. Não adicionar uma linha fará com que você tenha preenchimento duplo. Para uma melhor compreensão deste, consulte o diagrama na minha resposta aqui: stackoverflow.com/questions/23899715/...
jme11

1
explicação muito boa, obrigado. Eu amo o pouco sobre embrulhar o .colsdentro .rowpara evitar e cacel o estofamento. Eu sempre estava me perguntando por que usar linha e que diferença isso faz.
Rishiraj Purohit

Mas na documentação parece que a largura total de divs excede mais de 12, até 18 para 'xs'. Veja a seção 'Misto: móvel e computador' e por que? getbootstrap.com/docs/3.3/examples/grid
Michel

@Michel, parece que você está entendendo mal a documentação deles. eles estão mostrando duas opções xs separadas - uma para 12 colunas (largura total) e outra para 6 colunas (meia largura). Você verá que essas colunas também mostram lg-8 e lg-4 - o que elas estão mostrando é que elas abrangem 8 e 4 colunas (2/3 + 1/3 da largura total da largura) em telas grandes e 12 e 6 (largura total + 1/2 da linha seguinte) nos displays do telefone. espero que ajude!
perfil completo de Shawn Taylor

46

O sistema de grade do Bootstrap possui quatro classes:
xs (para telefones)
sm (para tablets)
md (para desktops)
lg (para desktops maiores)

As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.

Dica: Cada classe aumenta de escala; portanto, se você deseja definir as mesmas larguras para xs e sm, é necessário especificar apenas xs.

OK, a resposta é fácil, mas continue lendo:

col-lg- significa coluna grande ≥ 1200px
col-md- significa coluna média ≥ 992px
col-xs- significa coluna extra pequena≥ 768px

Os números de pixels são os pontos de interrupção; portanto, por exemplo, o col-xsalvo é o elemento quando a janela é menor que 768 px (provavelmente dispositivos móveis) ...

Eu também criou a imagem abaixo para mostrar como funciona o sistema de grade, neste exemplos que eu usá-los com 3, como col-lg-6para mostrar como o trabalho sistema de grade na página, olhar em como lg, mde xssão sensíveis ao tamanho da janela:

Sistema de grade de inicialização, col - * - 6


col-xs-*foi descartado no Bootstrap 4 em favor decol-*
Zohab Ali 16/08

Você poderia compartilhar o HTML (e, possivelmente, qualquer CSS)? Obrigado.
NoChance

11

O ponto principal é o seguinte:

col-lg-* col-md-* col-xs-* col-sm defina quantas colunas haverá nesses diferentes tamanhos de tela.

Exemplo: se você quiser que haja duas colunas nas telas da área de trabalho e nas telas do telefone, coloque duas col-md-6e duas col-xs-6classes em suas colunas.

Se você deseja que haja duas colunas nas telas da área de trabalho e apenas uma coluna nas telas do telefone (ou seja, duas linhas empilhadas umas sobre as outras), você coloca two col-md-6duas col-xs-12na coluna e, como soma será 24, elas serão empilhadas automaticamente em cima de cada outro, ou apenas deixe o xsestilo de fora.



6

Aqui está

col-lg-2: se a tela for grande ( lg ), esse componente ocupará dois elementos, considerando que a linha inteira pode acomodar 12 elementos (então você verá que na tela grande esse componente ocupa 16% do espaço de uma linha)

col-lg-6: se a tela for grande ( lg ), esse componente ocupará 6 elementos, considerando que a linha inteira pode caber 12 elementos - quando aplicado, você verá que o componente ocupou metade do espaço disponível na linha.

A regra acima é aplicada apenas quando a tela é grande. quando a tela é pequena, essa regra é descartada e apenas um componente por linha é mostrado.

A imagem abaixo mostra várias larguras de tamanho de tela:

definições de tamanho de tela

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.