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ıyoruzpadding-right
ve içeriği hizalamak için her satırın başında ve sonunda bunu dengelemekpadding-left
iç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 .container
veya .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
:
<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ı .row
eklemektir .overflow-hidden
:
<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 .row
sayfa sonunda bir miktar taşmaya neden olabilir. .row
Bu gerçekleşirse , .overflow-hidden
sınıfın etrafına bir sarmalayıcı eklersiniz :
<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-hidden
yatay 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 .
<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.
<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
. margin
Bu , tüm yakın alt sütunlardan negatifleri .row
ve yatay öğeleri kaldırır .padding
Uçtan uca bir tasarıma mı ihtiyacınız var? Üst öğeyi .container
veya öğ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.
<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, $gutters
Sass haritasından miras alınan $spacers
Sass 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,
);