Bootstrap 5 Grid: Yığın'dan Yatay'a

Grid Örneği: Yatayda Yığın

Bir temel grid sistemi oluşturalım, bu sistem küçük cihazlarda yığınır, daha büyük cihazlarda ise yatay hale gelir.

Aşağıdaki örnek, basit bir 'yatayda yığın' iki sütun düzenini gösterir, bu da tüm ekranlarda 50%/50% bölünme üretir, küçük ekranlarda otomatik olarak yığınır (100%):

Örnek: Yatayda Yığın

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

Kişisel olarak deneyin

İpucu:.col-sm-* sınıfındaki sayılar, div'in kaç sütun geçmesi gerektiğini belirtir (toplam 12 sütun). Dolayısıyla,.col-sm-1 1 sütun geçişini.col-sm-4 4 sütun geçişini.col-sm-6 6 sütun geçişini, vb.

Dikkat:Toplamın 12'ye veya daha az olmasına dikkat edin (tüm 12 kullanılabilir sütunu kullanmak zorunlu değildir):

İpucu:taşınarak .container-fluid sınıfını .containerherhangi bir tam genişlik düzeni sabit genişlik yanıt verici düzeni:

Örnek: Yanıt verici konteyner

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

Kişisel olarak deneyin

Otomatik düzen 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: sadece .col-size-* sayıları silin ve sadece col elementinde kullanın .col-size Bootstrap, ne kadar sütun olduğunu tanıyacak ve her sütun aynı genişliği alacak. Size sınıfı (sm, md vb.) ne kadar genişlemesi gerektiğini belirler:

<!-- İki sütun: tüm ekranların %50 genişliği, küçük cihazlar dışında (100% genişlik) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- Dört sütun: tüm ekranların %25 genişliği, küçük cihazlar dışında (100% genişlik) -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

Kişisel olarak deneyin