Bootstrap 4 Grid empilhado na horizontal
Exemplo de grade do Bootstrap 4: empilhado para horizontal
Vamos criar um sistema de grade básico que começa empilhado em dispositivos extra pequenos, antes de se tornar horizontal em dispositivos maiores.
O exemplo a seguir mostra um layout simples de duas colunas "empilhado para horizontal", o que significa que resultará em uma divisão de 50%/50% em todas as telas, exceto para telas extra pequenas, que serão empilhadas automaticamente (100%):
Exemplo: empilhado para horizontal
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Dica: Os números nas .col-sm-*classes indicam quantas colunas o div deve abranger (de 12). Portanto, .col-sm-1abrange 1 coluna, .col-sm-4abrange 4 colunas,
.col-sm-6abrange 6 colunas etc.
Observação:
certifique-se de que a soma seja 12 ou menos (não é necessário usar todas as 12 colunas disponíveis):
Dica: você pode transformar qualquer layout de largura fixa em um layout de largura total alterando a .containerclasse para .container-fluid:
Exemplo: recipiente de fluido
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Colunas de layout automático
No Bootstrap 4, há uma maneira fácil de criar colunas de largura igual para todos os dispositivos: basta remover o número de e usar a classe apenas em um número especificado de
elementos col . O Bootstrap reconhecerá quantas colunas existem e cada coluna terá a mesma largura. As classes de tamanho determinam quando as colunas devem ser responsivas:.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>