Bootstrap 4 griglia media

Esempio di griglia media

Nel capitolo precedente abbiamo presentato un esempio di griglia con classi per piccoli dispositivi. Abbiamo usato due div (colonne) e abbiamo dato loro una suddivisione del 25%/75%:

Ma su dispositivi medi il design potrebbe essere migliore con una suddivisione del 50%/50%.

Per i dispositivi medi utilizzeremo le .col-md-*classi:

Ora Bootstrap dirà "alla piccola dimensione, guarda le classi con -sm- in esse e usa quelle. Alla dimensione media, guarda le classi con -md- in esse e usa quelle".

L'esempio seguente risulterà in una suddivisione del 25%/75% sui dispositivi piccoli e del 50%/50% sui dispositivi medi (e grandi e xlarge). Su dispositivi extra piccoli, si accumulerà automaticamente (100%):

Usando solo medio

Nell'esempio seguente, specifichiamo solo la .col-md-6classe (senza .col-sm-*). Ciò significa che i dispositivi medi, grandi ed extra large si divideranno del 50%/50%, perché la classe aumenta. Tuttavia, per i dispositivi piccoli ed extra piccoli, verrà impilato verticalmente (100% di larghezza):

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 .col-md-*e usare la .col-mdclasse solo su un numero specificato di elementi col . Bootstrap riconoscerà quante colonne ci sono e ogni colonna avrà la stessa larghezza.

Se la dimensione dello schermo è inferiore a 768px , le colonne verranno impilate orizzontalmente:

Il prossimo capitolo mostra come aggiungere una percentuale di suddivisione diversa per i dispositivi di grandi dimensioni.