layouts de grade básicas para que você obtenha familiarizados com a construção no sistema de grade Bootstrap.
Três colunas iguais
Obter três colunas de igual largura a partir de desktops e de escala para grandes áreas de trabalho. Em dispositivos móveis, tablets e abaixo, as colunas serão empilhados automaticamente.
.col-md-4
.col-md-4
.col-md-4
Três colunas desiguais
Obter três colunas a partir de desktops e de escala para grandes desktops de várias larguras. Lembre-se, colunas de grade deve adicionar até doze por um único bloco horizontal. Mais do que isso, e as colunas começar empilhamento não importa a janela de exibição.
.col-md-3
.col-md-6
.col-md-3
Duas colunas
Obter duas colunas a partir de desktops e de escala para grandes áreas de trabalho.
.col-md-8
.col-md-4
Largura total, uma única coluna
Nenhuma classe de grade são necessários para elementos de largura total.
Duas colunas com duas colunas aninhados
Acordo com a documentação, aninhamento é fácil basta colocar uma fileira de colunas dentro de uma coluna existente. Isto dá-lhe duas colunas a partir de desktops e de escala para grandes áreas de trabalho, com outros dois (larguras iguais) dentro da coluna maior.
Em tamanhos de dispositivos móveis, tablets e para baixo, estas colunas e as suas colunas aninhados serão empilhados.
.col-md-8
.col-md-6
.col-md-6
.col-md-4
Misto: móveis e computadores desktop
O sistema de grade Bootstrap 3 tem quatro fileiras de classes: xs (telefone), sm (comprimidos), MD (desktops), e lg (desktops maiores). Você pode usar quase qualquer combinação destas classes para criar layouts mais dinâmicas e flexíveis.
Cada camada de classes de escalas para cima, ou seja, se você está pensando em definir as mesmas larguras de xs e sm, você só precisa especificar xs.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Misto: celular, tablet e ambiente de trabalho
.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Limpeza da coluna
Flutuadores claras em pontos de interrupção específicos para evitar embrulho desajeitado com conteúdo irregular.
.col-xs-6 .col-sm-3
Redimensionar a janela ou verificá-la no seu telefone para um exemplo.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Offset, empurrar, puxar e redefine
offsets RESET, empurra e puxa nos pontos de interrupção específicos.
.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
Referência: https://getbootstrap.com/examples/grid/