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.
