Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

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.

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
Özel sütun dolgusu
<div class="container px-4">
  <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
Özel sütun dolgusu
<div class="container overflow-hidden">
  <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-*dikey oluk genişliklerini kontrol etmek için sınıflar 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
Özel sütun dolgusu
Özel sütun dolgusu
Özel sütun dolgusu
<div class="container overflow-hidden">
  <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
Özel sütun dolgusu
Özel sütun dolgusu
Özel sütun dolgusu
<div class="container">
  <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
Satır sütun
Satır sütun
Satır sütun
Satır sütun
Satır sütun
Satır sütun
Satır sütun
Satır sütun
Satır sütun
<div class="container">
  <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? Üst öğeyi .containerveya öğesini bırakın .container-fluid.

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
<div class="row g-0">
  <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,
);