Grid: Peranti Besar Bootstrap 5

Perekomendan mata kuliah:

Grid contoh peranti besar XSmall Small Medium Large Extra Large
XXL Awalan kelas .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Lebar layar <576px >=768px >=992px >=1200px >=1400px

Dalam bab sebelumnya, kami menunjukkan contoh grid yang berisi kelas untuk peranti kecil dan menengah. Kami menggunakan dua div (kolom), dan memecahkan 25% / 75% di peranti kecil, 50% / 50% di peranti menengah:

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

Tetapi di peranti besar, rancangan pemecahan 33% / 66% mungkin lebih baik.

Peranti besar didefinikan sebagai lebar layarDari 992 pixel hingga 1199 pixel。

Untuk peranti besar, kami akan menggunakan .col-lg-* Kelas:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Di peranti kecil, gunakan yang termasuk -sm- kelas. Di peranti menengah, gunakan yang termasuk -md- kelas. Di peranti besar, gunakan yang termasuk -lg- kelas.

Ahli contoh akan mengakibatkan pemecahan 25% / 75% di peranti kecil, 50% / 50% di peranti menengah, dan 33% / 66% di peranti besar, xlarge dan xxlarge. Di peranti kecil, ia akan mengumpulkan secara automatik (100%):

Contoh

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

Cuba sendiri

Perhatian：Pastikan keseluruhan sama dengan atau kurang daripada 12 (tidak perlu menggunakan semua 12 lajur yang tersedia):

Hanya gunakan Large

Dalam contoh di bawah, kami hanya menentukan .col-lg-6 kelas (tanpa .col-md-* dan/atau .col-sm-*）。Ini bermakna peralatan besar, xlarge dan xxlarge akan dipisahkan 50/50%. Namun, untuk peralatan medium, kecil dan kecil, ia akan dipiling secara vertikal (lebar 100%):

Contoh

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

Cuba sendiri

Layar pengaturcaraan automatik

Dalam Bootstrap 5, ada cara yang mudah untuk mencipta lajur yang sama lebar untuk semua peralatan: hanya perlu dari .col-lg-* Buang nombor di dalam, dan hanya gunakan kolom element .col-lg Kelas. Bootstrap akan mengenal berapa banyak lajur, dan setiap lajur akan mendapat lebar yang sama.

Jika saiz skrinKurang daripada 992px, lajur akan dipiling secara horizontal:

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

Cuba sendiri