Griglia Bootstrap: impilata su orizzontale
Esempio di griglia Bootstrap: impilato su orizzontale
Creeremo un sistema di griglia di base che inizia impilato su dispositivi extra piccoli, prima di diventare orizzontale su dispositivi più grandi.
L'esempio seguente mostra un semplice layout a due colonne "impilato in orizzontale", il che significa che risulterà in una divisione del 50%/50% su tutti gli schermi, ad eccezione degli schermi extra piccoli, che verranno automaticamente impilati (100%):
Esempio: impilato su orizzontale
<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>
Suggerimento: i numeri nelle .col-sm-*classi indicano quante colonne deve occupare il div (su 12). Quindi, .col-sm-1si estende su 1 colonna, .col-sm-4si estende su 4 colonne,
.col-sm-6si estende su 6 colonne, ecc.
Nota: assicurati che la somma sia sempre 12!
Suggerimento: puoi trasformare qualsiasi layout a larghezza fissa in un layout a larghezza intera modificando la .containerclasse in .container-fluid:
Esempio: contenitore per liquidi
<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>