Bootstrap 4 Griglia impilata su orizzontale
Esempio di griglia Bootstrap 4: 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">
<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>
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:
assicurarsi che la somma sia pari o inferiore a 12 (non è necessario utilizzare tutte le 12 colonne disponibili):
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">
<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>
Colonne con layout automatico
In Bootstrap 4, c'è un modo semplice per creare colonne di uguale larghezza per tutti i dispositivi: basta rimuovere il numero da e usare la classe solo su un numero specificato di
elementi col . Bootstrap riconoscerà quante colonne ci sono e ogni colonna avrà la stessa larghezza. Le classi di dimensione determinano quando le colonne devono essere reattive:.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>