Bootstrap 5 Griglia: Dispositivi Medi

Esempio di griglia per dispositivi di taglia media

XSmall Small Medium Large Extra Large XXL
prefisso della classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
larghezza dello schermo <576px >=576px >=768px >=992px >=1200px >=1400px

Nel capitolo precedente, abbiamo mostrato un esempio di griglia che include classi per dispositivi di piccola taglia. Abbiamo utilizzato due div (colonne) e abbiamo dato loro una suddivisione del 25% / 75%:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Ma su dispositivi di taglia media, un disegno di suddivisione del 50% / 50% potrebbe essere migliore.

La taglia media del dispositivo è definita dalla larghezza dello schermoDa 768 pixel a 991 pixel.

Per i dispositivi di taglia media, utilizzeremo .col-md-* Classe:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Sui dispositivi di taglia piccola, utilizzare -sm- la classe. Sui dispositivi di taglia media, utilizzare -md- la classe.

Esempio che porta a una suddivisione del 25% / 75% su dispositivi di piccola taglia e una suddivisione del 50% / 50% su dispositivi di taglia media (e grandi, ultra grandi e extra grandi). Su dispositivi di taglia ultra piccola, si accoda automaticamente (100%):

Esempio

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>La Fondazione Mondiale per la Natura (WWF), fondata il 29 aprile 1961, il suo logo è un panda gigante ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>Nel 1980, la WWF è arrivata ufficialmente in Cina, invitata dal governo cinese a condurre il lavoro di protezione del panda gigante e del suo habitat ...</p>
    </div>
  </div>
</div>

Prova te stesso

Attenzione:Assicurati che la somma sia uguale o inferiore a 12 (non è necessario utilizzare tutte le 12 colonne disponibili):

Usa solo Medium

Nel seguente esempio, abbiamo specificato solo .col-md-6 Classe (senza .col-sm-*）。Ciò significa che i dispositivi di medie, grandi, extra-grandi e XXL saranno divisi al 50% / 50% - poiché la classe si espanderà. Tuttavia, per i dispositivi di piccole e ultra-piccole dimensioni, saranno accatastati verticalmente (larghezza del 100%):

Esempio

<div class="row">
  <div class="col-md-6">
    <p>La Fondazione Mondiale per la Natura (WWF), fondata il 29 aprile 1961, il suo logo è un panda gigante ...</p>
  </div>
  <div class="col-md-6">
    <p>Nel 1980, la WWF è arrivata ufficialmente in Cina, invitata dal governo cinese a condurre il lavoro di protezione del panda gigante e del suo habitat ...</p>
  </div>
</div>

Prova te stesso

Layout automatico delle colonne

In Bootstrap 5, c'è un modo semplice per creare colonne uniformi per tutti i dispositivi: devi solo .col-md-* Elimina i numeri e usa solo sul elemento col. .col-md La classe. Bootstrap riconoscerà il numero di colonne e ogni colonna avrà la stessa larghezza.

Se la dimensione dello schermoMeno di 768px, le colonne saranno accatastate orizzontalmente:

<!-- Due colonne: su dispositivi di medie e grandi dimensioni sono larghezza del 50% -->
<div class="row">
  <div class="col-md">1 di 2</div>
  <div class="col-md">2 di 2</div>
</div>
<!-- Quattro colonne: su dispositivi di medie e grandi dimensioni sono larghezza del 25% -->
<div class="row">
  <div class="col-md">1 di 4</div>
  <div class="col-md">2 di 4</div>
  <div class="col-md">3 di 4</div>
  <div class="col-md">4 di 4</div>
</div>

Prova te stesso

Il capitolo successivo mostrerà come aggiungere percentuali di divisione diverse per i dispositivi di grandi dimensioni.