Griglia Bootstrap 5: XXL

Esempio di griglia dispositivo XXL

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

I dispositivi XXL vengono definiti come quelli con 1400 pixel e superiorilarghezza dello schermo.

Esempio che sulla configurazione di dispositivi medi, grandi e ultragrandi genera una divisione del 50/50, su dispositivi XXL genera una divisione del 25/75. Sui dispositivi piccoli e ultrapiccoli si accorpa automaticamente (100%):

Esempio

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <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 col-xxl-9">
      <p>Nel 1980, il WWF è arrivato ufficialmente in Cina, invitato dal governo cinese per condurre il lavoro di protezione del panda gigante e del suo habitat ...</p>
    </div>
  </div>
</div>

Prova tu stesso

Attenzione:Assicurati che la somma sia sempre 12.

solo XXL

nel seguente esempio, abbiamo specificato solo .col-xxl-6 classi (senza .col-md-* e / o .col-sm-*）。Questo significa che i dispositivi xxlarge verranno divisi al 50/50%. Tuttavia, per i dispositivi ultra-grande, grande, medio, piccolo e ultra-piccolo, si stackeranno verticalmente (larghezza del 100%):

Esempio

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

Prova tu stesso

Layout automatico delle colonne

In Bootstrap 5, c'è un modo semplice per creare colonne uniformi per tutti i dispositivi: è sufficiente partire da .col-xxl-* Rimuovere i numeri e utilizzare solo sugli elementi col: .col-xxl La classe. Bootstrap riconoscerà il numero di colonne e ogni colonna avrà la stessa larghezza.

se la dimensione dello schermoinferiore a 1400px, le colonne si appenderanno orizzontalmente:

<!-- Due colonne: in dispositivi di grande formato e superiori sono larghezza del 50% -->
<div class="row">
  <div class="col-xxl">1 di 2</div>
  <div class="col-xxl">2 di 2</div>
</div>
<!-- Quattro colonne: in dispositivi di grande formato e superiori sono larghezza del 25% -->
<div class="row">
  <div class="col-xxl">1 di 4</div>
  <div class="col-xxl">2 di 4</div>
  <div class="col-xxl">3 di 4</div>
  <div class="col-xxl">4 di 4</div>
</div>

Prova tu stesso