Bootstrap 5 Griglia: Dispositivi UltrapiùPiccoli

Esempio di griglia di dispositivi ultra piccoli

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

Supponiamo di avere una semplice disposizione a due colonne. Speriamo che le colonne sianoTuttiSuddivisione dei dispositivi 25% / 75%.

Aggiungeremo le seguenti classi alle due colonne:

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

L'esempio seguente causerà una suddivisione del 25% / 75% per tutti i dispositivi (ultra piccoli, piccoli, medi, grandi, ultra grandi e giganti):

Esempio

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

Prova personalmente

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

Per una divisione 33.3/66.6%, dovresti usare .col-4 e .col-8Per una divisione 50/50%, dovresti usare .col-6 e .col-6）：

Esempio

<!-- Divisione 33.3/66.6% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>La Fondazione Mondiale per la Natura (WWF), fondata il 29 aprile 1961, il suo logo è un panda gigante...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>Nel 1980, la WWF è arrivata in Cina ufficialmente, invitata dal governo cinese per condurre il lavoro di protezione del panda gigante e del suo habitat...</p>
    </div>
  </div>
</div>
<!-- Divisione 50/50% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>La Fondazione Mondiale per la Natura (WWF), fondata il 29 aprile 1961, il suo logo è un panda gigante...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>Nel 1980, la WWF è arrivata in Cina ufficialmente, invitata dal governo cinese per condurre il lavoro di protezione del panda gigante e del suo habitat...</p>
    </div>
  </div>
</div>

Prova personalmente

Colonne di layout automatico

In Bootstrap 5, c'è un modo semplice per creare colonne di layout automatico per tutti i dispositiviColonne di larghezza ugualeBasta partire da .col-* Rimuovi i numeri e usa solo il col elemento .col Classi. Bootstrap riconoscerà il numero di colonne e ogni colonna avrà la stessa larghezza:

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

Prova personalmente

Il prossimo capitolo mostrerà come aggiungere diverse percentuali di divisione per i dispositivi di piccole dimensioni.