oluklar

Oluklar, Bootstrap ızgara sistemindeki içeriği duyarlı bir şekilde boşluk bırakmak ve hizalamak için kullanılan sütunlarınız arasındaki dolgudur.

Bu sayfada

Onlar nasıl çalışır

Oluklar, yatay tarafından oluşturulan sütun içeriği arasındaki boşluklardır padding. Her sütunda ve ayarlıyoruz padding-rightve içeriği hizalamak için her satırın başında ve sonunda bunu dengelemek padding-leftiçin negatif kullanıyoruz .margin
Oluklar 1.5rem( 24px) genişliğinde başlar. Bu, ızgaramızı dolgu ve kenar boşlukları ölçeğiyle eşleştirmemizi sağlar.
Oluklar duyarlı bir şekilde ayarlanabilir. Yatay olukları, dikey olukları ve tüm olukları değiştirmek için kesme noktasına özgü oluk sınıflarını kullanın.

Yatay oluklar

.gx-*yatay oluk genişliklerini kontrol etmek için sınıflar kullanılabilir. İstenmeyen taşmayı önlemek için daha büyük oluklar da kullanılıyorsa .containerveya .container-fluidüst öğesinin, eşleşen bir dolgu yardımcı programı kullanılarak ayarlanması gerekebilir. Örneğin, aşağıdaki örnekte dolguyu şu şekilde artırdık .px-4:

Özel sütun dolgusu

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Alternatif bir çözüm, sınıfın etrafına bir sarmalayıcı .roweklemektir .overflow-hidden:

Özel sütun dolgusu

html

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Dikey oluklar

.gy-*sınıflar, sütunlar yeni satırlara kaydırıldığında bir satırdaki dikey oluk genişliklerini kontrol etmek için kullanılabilir. Yatay oluklar gibi, dikey oluklar da .rowsayfa sonunda bir miktar taşmaya neden olabilir. .rowBu gerçekleşirse , .overflow-hiddensınıfın etrafına bir sarmalayıcı eklersiniz :

Özel sütun dolgusu

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Yatay ve dikey oluklar

.g-*.overflow-hiddenyatay oluk genişliklerini kontrol etmek için sınıflar kullanılabilir, aşağıdaki örnek için daha küçük bir oluk genişliği kullanıyoruz, bu nedenle sarmalayıcı sınıfını eklemeye gerek kalmayacak .

Özel sütun dolgusu

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Satır sütun olukları

Satır sütunlarına cilt payı sınıfları da eklenebilir . Aşağıdaki örnekte, duyarlı satır sütunları ve duyarlı oluk sınıfları kullanıyoruz.

Satır sütun

html

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

Oluk yok

Ön tanımlı grid sınıflarımızda kolonlar arasındaki oluklar ile kaldırılabilir .g-0. marginBu , tüm yakın alt sütunlardan negatifleri .rowve yatay öğeleri kaldırır .padding

Uçtan uca bir tasarıma mı ihtiyacınız var? Taşmayı önlemek için üst öğeyi .containerveya öğesini bırakın .container-fluidve öğesine ekleyin ..mx-0.row

Pratikte, işte böyle görünüyor. Bunu diğer tüm önceden tanımlanmış ızgara sınıflarıyla (sütun genişlikleri, yanıt veren katmanlar, yeniden sıralamalar ve daha fazlası dahil) kullanmaya devam edebileceğinizi unutmayın.

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

olukları değiştir

Sınıflar, $guttersSass haritasından miras alınan $spacersSass haritasından oluşturulur.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);