Oluklar
Oluklar - bu Bootstrap grid tizimidagi tarkibni mos ravishda bo'sh joylash va tekislash uchun ishlatiladigan ustunlar orasidagi to'ldirish.
Ular qanday ishlaydi
-
Oluklar gorizontal tomonidan yaratilgan ustunlar tarkibi orasidagi bo'shliqlardir
padding
. Biz har bir ustunga va o'rnatamizpadding-right
va tarkibni tekislash uchun har bir satrning boshi va oxiridagi o'rnini o'zgartirish uchun salbiydan foydalanamiz.padding-left
margin
-
Oluklar
1.5rem
(24px
) kenglikdan boshlanadi. Bu bizga to'rimizni to'ldirish va chekka bo'shliqlar shkalasiga moslashtirish imkonini beradi . -
Oluklar sezgir tarzda sozlanishi mumkin. Gorizontal oluklarni, vertikal oluklarni va barcha oluklarni o'zgartirish uchun uzilish nuqtasiga xos oluk sinflaridan foydalaning.
Gorizontal oluklar
.gx-*
sinflar gorizontal truba kengliklarini nazorat qilish uchun ishlatilishi mumkin. Kattaroq oluklar ham istalmagan to‘lib ketishining oldini olish uchun ishlatilsa, mos padding yordam dasturidan foydalanib, .container
yoki .container-fluid
ota-onani sozlash kerak bo‘lishi mumkin. Misol uchun, quyidagi misolda biz to'ldirishni bilan oshirdik .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>
Muqobil yechim sinf .row
bilan birga o'ram qo'shishdir:.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>
Vertikal oluklar
.gy-*
sinflar vertikal truba kengliklarini nazorat qilish uchun ishlatilishi mumkin. Gorizontal oluklar singari, vertikal oluklar ham .row
sahifa oxiridan pastroq toshib ketishiga olib kelishi mumkin. .row
Agar bu sodir bo'lsa , siz .overflow-hidden
sinfga o'ram qo'shasiz :
<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>
Gorizontal va vertikal oluklar
.g-*
.overflow-hidden
classes gorizontal truba kengligini boshqarish uchun ishlatilishi mumkin, quyidagi misol uchun biz kichikroq truba kengligidan foydalanamiz, shuning uchun o'rash sinfini qo'shishga hojat qolmaydi .
<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>
Qator ustunlar oluklar
Oluklar sinflari qator ustunlariga ham qo'shilishi mumkin . Quyidagi misolda biz javob beruvchi satr ustunlari va sezgir gutter sinflaridan foydalanamiz.
<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>
Oluklar yo'q
Oldindan belgilangan panjara sinflarimizdagi ustunlar orasidagi oluklar yordamida olib tashlash mumkin .g-0
. Bu barcha bevosita bolalar ustunlaridan salbiy margin
s .row
va gorizontalni olib tashlaydi .padding
Chetdan chekkagacha dizayn kerakmi? Ota-onani tashlang .container
yoki .container-fluid
.
Amalda, bu qanday ko'rinadi. Shuni yodda tutingki, siz buni boshqa barcha oldindan belgilangan panjara sinflari (jumladan, ustunlar kengligi, sezgir darajalar, qayta tartiblashlar va boshqalar) bilan ishlatishda davom etishingiz mumkin.
<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>
Oluklarni almashtiring
Sinflar $gutters
Sass xaritasidan meros bo'lib qolgan Sass xaritasidan qurilgan $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);