Grid Bootstrap 5: Dari Beraturan ke Horisontal

Contoh Grid: Beraturan Horisontal

Buat sistem grid dasar yang awalnya dihimpun di perangkat ultra kecil, lalu menjadi horisontal di perangkat yang lebih besar.

Contoh di bawah ini menunjukkan layout dua kolom sederhana yang 'beraturan horisontal', yang berarti akan memunculkan 50%/50% pembedaan di semua layar, kecuali layar ultra kecil, yang akan otomatis dihimpun (100%):

Contoh: Beraturan Horisontal

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Kolom 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Kolom 2 ...</p>
    </div>
  </div>
</div>

Coba Sendiri

Petunjuk:.col-sm-* Angka dalam kelas menunjukkan berapa banyak kolom div harus melintasi (dari 12 kolom). Jadi,.col-sm-1 Melintasi 1 kolom,.col-sm-4 Melintasi 4 kolom,.col-sm-6 Melintasi 6 kolom, dan seterusnya.

Perhatian:Pastikan totalnya sama atau kurang dari 12 (tidak perlu menggunakan semua 12 kolom yang tersedia):

Petunjuk:Dengan mengubah .container-fluid kelas menjadi .container，Anda dapat mengubah setiap full-width Layout berubah menjadi fixed-width Tata letak yang berespon:

Contoh: Kontainer yang berespon

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Kolom 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Kolom 2 ...</p>
    </div>
  </div>
</div>

Coba Sendiri

Layout kolom otomatis

Dalam Bootstrap 5, ada cara yang mudah untuk membuat kolom yang sama lebar untuk semua perangkat: hanya perlu dari .col-size-* Hapus angka dan hanya gunakan di elemen col .col-size Kelas. Bootstrap akan mengenali berapa banyak kolom, dan setiap kolom akan memperoleh lebar yang sama. Ukuran kelas (sm, md, dll) menentukan kapan kolom harus merespon:

<!-- Dua kolom: lebar 50% di semua layar, kecuali perangkat kecil ekstra (lebar 100%) -->
<div class="row">
  <div class="col-sm">1 dari 2</div>
  <div class="col-sm">2 dari 2</div>
</div>
<!-- Empat kolom: lebar 25% di semua layar, kecuali perangkat kecil ekstra (lebar 100%) -->
<div class="row">
  <div class="col-sm">1 dari 4</div>
  <div class="col-sm">2 dari 4</div>
  <div class="col-sm">3 dari 4</div>
  <div class="col-sm">4 dari 4</div>
</div>

Coba Sendiri