Abaixo temos recolhido alguns exemplos de básicos Bootstrap layouts de grade.
Três colunas iguais
O exemplo a seguir mostra como obter um três colunas de igual largura a partir de comprimidos e de escala para grandes áreas de trabalho. Em telefones celulares, as colunas serão empilhados automaticamente:
Exemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-4">.col-sm-4</div>
</div> Tente você mesmo " Três colunas desiguais
O exemplo a seguir mostra como obter três diferentes de largura colunas a partir de comprimidos e de escala para grandes áreas de trabalho:
Exemplo
<div class="row">
<div
class="col-sm-3">.col-sm-3</div>
<div
class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-3">.col-sm-3</div>
</div> Tente você mesmo " Duas colunas desiguais
O exemplo a seguir mostra como obter duas colunas diferentes de largura a partir de comprimidos e escalar a grandes áreas de trabalho:
Exemplo
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Tente você mesmo " Duas colunas com duas colunas aninhadas
O exemplo a seguir mostra como obter duas colunas a partir de comprimidos e escalar a grandes áreas de trabalho, com outras duas colunas (larguras iguais) dentro da coluna maior (em telefones celulares, estas colunas e as suas colunas aninhados serão empilhados):
Exemplo
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div> Tente você mesmo " Misto: móveis e de desktop
O Bootstrap sistema de rede tem quatro classes: xs (telefone), sm (comprimidos), md (desktops), e lg (desktops maiores). As aulas podem ser combinados para criar layouts mais dinâmicas e flexíveis.
Dica: Cada classe é dimensionado para cima, por isso, se você deseja definir as mesmas larguras de xs e sm , você só precisa especificar xs .
Exemplo
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9
.col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3
.col-md-5</div>
</div>
<div class="row">
<div
class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div
class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div
class="row">
<div class="col-xs-6">.col-xs-6</div>
< div
class="col-xs-6">.col-xs-6</div>
</div> Tente você mesmo " Dica: Lembre-se que colunas de grade deve adicionar até doze para uma linha. Mais do que isso, as colunas serão empilhados, não importa a viewport .
Misto: Mobile, tablets e computadores
Exemplo
<div class="row">
<div class="col-xs-7 col-sm-6
col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5
col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>
<div
class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6
.col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4
col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div> Tente você mesmo " Limpar flutuadores
Flutuadores claras (com a .clearfix classe) em pontos de interrupção específicos para evitar envolvimento estranha com conteúdo desigual:
Exemplo
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser
window to see the effect.
</div>
<div class="col-xs-6
col-sm-3">Column 2</div>
<!-- Add clearfix for only the required
viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6
col-sm-3">Column 4</div>
</div> Tente você mesmo " Colunas de compensação
Mover colunas para a direita com .col-md-offset-* classes. Essas classes aumentar a margem esquerda de uma coluna * colunas:
Exemplo
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5
.col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6
col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> Tente você mesmo " Empurrar e puxar - Alterar Coluna Ordenação
Alterar a ordem das colunas de grade com .col-md-push-* e .col-md-pull-* classes:
Exemplo
<div class="row">
<div class="col-sm-4
col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8
col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div> Tente você mesmo "