Bootstrap 5 ağı: XXL

XXL cihaz ağı örneği

XKüçük Küçük Orta Büyük Extra Büyük XXL
sınıf öneki .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
ekran genişliği <576px >=576px >=768px >=992px >=1200px >=1400px

XXL cihaz, şu özelliklere sahip olarak tanımlanır 1400 piksel ve üzeriekran genişliği.

Orta, büyük ve dev büyük cihazlarda %50/%50 bölünme oluşturur, XXL cihazlarda %25/%75 bölünme oluşturur. Küçük ve çok küçük cihazlarda otomatik olarak katlanır (100%)：

Örnek

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>Doğa Koruma Vakfı (WWF), 29 Nisan 1961'de kuruldu, logosu bir büyük panda ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1980 yılında, WWF resmen Çin'e geldi ve Çin Hükümeti tarafından davet edildi, büyük panda ve onun yaşam alanını koruma çalışmaları ...</p>
    </div>
  </div>
</div>

Kişisel olarak deneyin

Dikkat:toplamın her zaman 12 olduğundan emin olun.

XXL

örneğinde, sadece .col-xxl-6 sınıfları (dışında .col-md-* ve / veya .col-sm-*）。Bu, xxlarge cihazların 50/50'ye bölünmesi anlamına gelir. Ancak, ultra büyük, büyük, orta, küçük ve ultra küçük cihazlar dikeyde yığınlanacaktır (100% genişlik):

Örnek

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>Doğa Koruma Vakfı (WWF), 29 Nisan 1961'de kuruldu, logosu bir büyük panda ...</p>
    </div>
    <div class="col-xxl-6">
      <p>1980 yılında, WWF resmen Çin'e geldi ve Çin Hükümeti tarafından davet edildi, büyük panda ve onun yaşam alanını koruma çalışmaları ...</p>
    </div>
  </div>
</div>

Kişisel olarak deneyin

Otomatik Düzenleyici Sütunlar

Bootstrap 5'te, tüm cihazlar için eş genişlikli sütunlar oluşturmak için basit bir yöntem vardır: yalnızca .col-xxl-* sayıları silin ve sadece col öğeleri üzerinde kullanın .col-xxl sınıfı. Bootstrap, kaç sütun olduğunu tanıyacak ve her sütun aynı genişliği alacaktır.

ekran boyutu1400px'den küçükdizi, yatayda yığınlanacak:

<!-- İki sütun: Uzun çaplı cihazlarda 50% genişlik -->
<div class="row">
  <div class="col-xxl">1 of 2</div>
  <div class="col-xxl">2 of 2</div>
</div>
<!-- Dört sütun: Uzun çaplı cihazlarda 25% genişlik -->
<div class="row">
  <div class="col-xxl">1 of 4</div>
  <div class="col-xxl">2 of 4</div>
  <div class="col-xxl">3 of 4</div>
  <div class="col-xxl">4 of 4</div>
</div>

Kişisel olarak deneyin