Grid Bootstrap 5: Perangkat Menengah

Contoh grid peralatan menengah

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

Dalam bab sebelumnya, kami menunjukkan sebuah contoh grid yang mengandung kelas untuk peralatan kecil. Kami menggunakan dua div (kolom), dan memberikan mereka pengiriman 25% / 75%:

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

Tapi di peralatan menengah, desain pengiriman 50% / 50% mungkin lebih baik.

Peralatan menengah didefinikan sebagai lebar layarDari 768 pixel sampai 991 pixel.

Untuk peralatan menengah, kami akan menggunakan .col-md-* Kelas:

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

Pada peralatan kecil, gunakan yang termasuk -sm- kelas. Pada peralatan menengah, gunakan yang termasuk -md- kelas.

Contoh di bawah ini akan mengakibatkan pengiriman 25% / 75% di peralatan kecil (dan peralatan menengah, serta besar, extra besar dan super besar) 50% / 50% pengiriman. Pada peralatan kecil ekstra, itu akan secara otomatis menumpuk (100%):

Contoh

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>World Wide Fund for Nature (WWF), didirikan pada 29 April 1961, lambangnya adalah beruang bear ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>1980, WWF resmi datang ke Cina, diundang pemerintah Cina untuk melaksanakan pekerjaan perlindungan beruang bear dan habitatnya di Cina ...</p>
    </div>
  </div>
</div>

Coba Sendiri

Perhatian:Jaminan total sama dengan atau kurang dari 12 (tidak perlu menggunakan semua 12 kolom yang tersedia):

Hanya menggunakan Medium

Di contoh di bawah ini, kami hanya menentukan .col-md-6 Kelas (tanpa .col-sm-*）。Artinya, perangkat medium, besar, super besar, dan XXL akan memecahkan 50% / 50% - karena kelas ini akan menyebar. Namun, untuk perangkat kecil dan super kecil, akan beraturan vertikal (lebar 100%):

Contoh

<div class="row">
  <div class="col-md-6">
    <p>World Wide Fund for Nature (WWF), didirikan pada 29 April 1961, lambangnya adalah beruang bear ...</p>
  </div>
  <div class="col-md-6">
    <p>1980, WWF resmi datang ke Cina, diundang pemerintah Cina untuk melaksanakan pekerjaan perlindungan beruang bear dan habitatnya di Cina ...</p>
  </div>
</div>

Coba Sendiri

Kolom Layout Otomatis

Dalam Bootstrap 5, ada cara yang sederhana untuk membuat kolom yang sama lebar untuk semua perangkat: hanya dengan memulai dari .col-md-* Hapus angka, dan hanya gunakan di elemen col .col-md Kelas. Bootstrap akan mengenali berapa banyak kolom, dan setiap kolom akan mendapatkan lebar yang sama.

Jika ukuran layarKecil dari 768px, kolom akan beraturan secara horizontal:

<!-- Dua kolom: di perangkat berukuran medium ke atas adalah lebar 50% -->
<div class="row">
  <div class="col-md">1 dari 2</div>
  <div class="col-md">2 dari 2</div>
</div>
<!-- Empat kolom: di perangkat berukuran medium ke atas adalah lebar 25% -->
<div class="row">
  <div class="col-md">1 dari 4</div>
  <div class="col-md">2 dari 4</div>
  <div class="col-md">3 dari 4</div>
  <div class="col-md">4 dari 4</div>
</div>

Coba Sendiri

Bab berikutnya akan menunjukkan bagaimana menambahkan persentase pemecahan yang berbeda untuk perangkat besar.