Bootstrap 5 Griglia: Dispositivi di Grandezza

Corso raccomandato:

Esempio di griglia per dispositivi di grandi dimensioni XSmall Small Medium Large Extra Large
XXL Prefisso della classe .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Schermo <576px >=768px >=992px >=1200px >=1400px

Nel capitolo precedente, abbiamo mostrato un esempio di griglia che contiene classi adatte per dispositivi di piccola e media dimensione. Abbiamo utilizzato due div (colonne) e abbiamo effettuato una divisione del 25%/75% sui dispositivi di piccola dimensione e una divisione del 50%/50% sui dispositivi di media dimensione:

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

Ma su dispositivi di grandi dimensioni, un disegno di divisione del 33% / 66% potrebbe essere migliore.

I dispositivi di grandi dimensioni sono definiti come la larghezza dello schermoda 992 pixel a 1199 pixel。

Per i dispositivi di grandi dimensioni, utilizzeremo .col-lg-* Classe:

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

Sui dispositivi di piccola dimensione, utilizzare -sm- la classe. Sui dispositivi di media dimensione, utilizzare -md- la classe. Sui dispositivi di grandi dimensioni, utilizzare -lg- la classe.

Esempio che causerebbe la divisione del 25%/75% su dispositivi di piccola dimensione, del 50%/50% su dispositivi di media dimensione e della divisione del 33%/66% su dispositivi di grandi, xlarge e xxlarge dimensioni. Sui dispositivi di ultra-piccola dimensione, si ripilerà automaticamente (100%):

Esempio

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <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 col-lg-8">
      <p>Nel 1980, la WWF è arrivata ufficialmente in Cina, è stata invitata dal governo cinese a condurre il lavoro di protezione del panda gigante e del suo habitat ...</p>
    </div>
  </div>
</div>

Prova personalmente

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

Usare Large

Nell'esempio seguente, specifichiamo solo .col-lg-6 classi (senza .col-md-* e/o .col-sm-*）。Questo significa che i dispositivi large, xlarge e xxlarge saranno divisi al 50/50%. Tuttavia, per i dispositivi medi, piccoli e ultra piccoli, saranno stackati verticalmente (larghezza del 100%):

Esempio

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-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-lg-6">
      <p>Nel 1980, la WWF è arrivata ufficialmente in Cina, è stata invitata dal governo cinese a condurre il lavoro di protezione del panda gigante e del suo habitat ...</p>
    </div>
  </div>
</div>

Prova personalmente

Layout automatico delle colonne

In Bootstrap 5, c'è un modo semplice per creare colonne uniformi per tutti i dispositivi: è sufficiente partire da .col-lg-* Eliminare i numeri e utilizzare solo sull'elemento col .col-lg La classe. Bootstrap riconoscerà quante colonne ci sono e ogni colonna avrà la stessa larghezza.

Se la dimensione dello schermoMeno di 992px, le colonne si stackano orizzontalmente:

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

Prova personalmente