Bootstrap Exemplo Grid: Stacked-horizontal
Vamos criar um sistema de rede básica que começa empilhados nos telemóveis / tablets (pequenos dispositivos), antes de se tornar horizontal em desktops (médias / grandes dispositivos).
O exemplo a seguir mostra um layout simples "empilhados-horizontal" de duas colunas, o que significa que irá resultar em um / 50% de divisão de 50% em todas as telas, exceto por pequenas telas extras, que serão empilhados automaticamente (100%):
Exemplo: Stacked-horizontal
<div class="container">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Tente você mesmo " Dica: Os números nos .col-sm-* aulas indica quantas colunas o div deve abranger (em 12). Então, .col-sm-1 vãos 1 coluna, .col-sm-4 vãos 4 colunas, .col-sm-6 vãos 6 colunas, etc.
Nota: Certifique-se de que a soma sempre acrescenta-se a 12!
Dica: Você pode transformar qualquer layout de largura fixa em um layout de largura total, alterando a .container classe para .container-fluid :
Exemplo: recipiente de fluido
<div class="container-fluid">
<h1>Hello
World!</h1>
<div class="row">
<div
class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Tente você mesmo "