Bootstrap 5 Grid: XXL

Instansi grid peralatan XXL

XSmall Small Medium Large Extra Large XXL
awalan kelas .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
lebar layar <576px >=576px >=768px >=992px >=1200px >=1400px

Peralatan XXL ditakrifkan sebagai mempunyai 1400 piksel dan di ataslebar layar.

Contoh ini akan menghasilkan pemecahan 50% / 50% di peralatan medium, besar dan super besar, serta 25% / 75% di peralatan XXL. Pada peralatan kecil dan super kecil, ia akan otomatis menumpuk (100%):

Contoh

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>World Wide Fund for Nature (WWF), diasaskan pada 29 April 1961, lambangnya adalah seekor gajah panda ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1980, WWF secara rasmi datang ke China, diundang kerana kerajaan China untuk melaksanakan kerja perlindungan gajah panda dan habitatnya ...</p>
    </div>
  </div>
</div>

Cuba sendiri

Perhatian:Pastikan bahawa jumlah selalu adalah 12.

hanya menggunakan XXL

di contoh di bawah, kami hanya menentukan .col-xxl-6 kelas (tanpa .col-md-* dan / atau .col-sm-*）。Ini bermakna peranti xxlarge akan dipisahkan 50%/50%. Tetapi, untuk peranti extra-large, besar, medium, kecil dan ultra-kecil, ia akan dijumput secara vertikal (lebar 100%):

Contoh

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>World Wide Fund for Nature (WWF), diasaskan pada 29 April 1961, lambangnya adalah seekor gajah panda ...</p>
    </div>
    <div class="col-xxl-6">
      <p>1980, WWF secara rasmi datang ke China, diundang kerana kerajaan China untuk melaksanakan kerja perlindungan gajah panda dan habitatnya ...</p>
    </div>
  </div>
</div>

Cuba sendiri

Baris susunan automatik

Dalam Bootstrap 5, ada cara mudah untuk mencipta baris yang sama lebar untuk semua peranti: hanya daripada .col-xxl-* Buang nombor di dalam, dan hanya gunakan di elemen col .col-xxl Kelas. Bootstrap akan mengenal berapa banyak baris, dan setiap baris akan mendapat lebar yang sama.

Jika saiz skrinKurang daripada 1400px, baris akan dijumput secara horizontal:

<!-- Dua baris: Lebar 50% di peranti besar dan di atas -->
<div class="row">
  <div class="col-xxl">1 daripada 2</div>
  <div class="col-xxl">2 daripada 2</div>
</div>
<!-- Empat baris: Lebar 25% di peranti besar dan di atas -->
<div class="row">
  <div class="col-xxl">1 daripada 4</div>
  <div class="col-xxl">2 daripada 4</div>
  <div class="col-xxl">3 daripada 4</div>
  <div class="col-xxl">4 daripada 4</div>
</div>

Cuba sendiri