Grille Bootstrap 5 : XXL

Exemple de grille d'appareil XXL

XSmall Small Medium Large Extra Large XXL
préfixe de classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
la largeur de l'écran <576px >=576px >=768px >=992px >=1200px >=1400px

Les appareils XXL sont définis comme ayant 1400 pixels et plusla largeur de l'écran.

L'exemple suivant produira une séparation de 50/50% sur les appareils de taille moyenne, grande et extra-large, et une séparation de 25/75% sur les appareils XXL. Sur les appareils de petite et très petite taille, il se regroupera automatiquement (100%) :

Exemple

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>Le Fonds mondial pour la nature (WWF), fondé le 29 avril 1961, son logo est un panda géant ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>En 1980, le WWF est officiellement venu en Chine, invité par le gouvernement chinois pour développer des activités de protection des pandas géants et de leur habitat ...</p>
    </div>
  </div>
</div>

Essayez-le vous-même

Attention :Assurez-vous que la somme reste toujours à 12.

Utilisez uniquement XXL

dans l'exemple suivant, nous n'avons spécifié que .col-xxl-6 les classes (sans .col-md-* et / ou .col-sm-*）。Cela signifie que les appareils xxlarge seront divisés en 50/50%. Cependant, pour les appareils ultra-grands, grands, moyens, petits et ultra-petits, ils seront empilés verticalement (largeur de 100%) :

Exemple

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>Le Fonds mondial pour la nature (WWF), fondé le 29 avril 1961, son logo est un panda géant ...</p>
    </div>
    <div class="col-xxl-6">
      <p>En 1980, le WWF est officiellement venu en Chine, invité par le gouvernement chinois pour développer des activités de protection des pandas géants et de leur habitat ...</p>
    </div>
  </div>
</div>

Essayez-le vous-même

Colonnes de layout automatique

Dans Bootstrap 5, il existe une méthode simple pour créer des colonnes égales pour tous les appareils : il suffit de partir de .col-xxl-* Supprimez les nombres et utilisez uniquement sur l'élément col .col-xxl La classe. Bootstrap reconnaîtra le nombre de colonnes et chaque colonne obtiendra la même largeur.

Si la taille de l'écraninférieur à 1400pxLes colonnes seront empilées horizontalement :

<!-- Deux colonnes : en largeur de 50% sur les appareils de grande taille et plus grands -->
<div class="row">
  <div class="col-xxl">1 de 2</div>
  <div class="col-xxl">2 de 2</div>
</div>
<!-- Quatre colonnes : en largeur de 25% sur les appareils de grande taille et plus grands -->
<div class="row">
  <div class="col-xxl">1 de 4</div>
  <div class="col-xxl">2 de 4</div>
  <div class="col-xxl">3 de 4</div>
  <div class="col-xxl">4 de 4</div>
</div>

Essayez-le vous-même