Oluklar

Oluklar - bu Bootstrap grid tizimidagi tarkibni mos ravishda bo'sh joylash va tekislash uchun ishlatiladigan ustunlar orasidagi to'ldirish.

Ushbu sahifada

Ular qanday ishlaydi

Oluklar gorizontal tomonidan yaratilgan ustunlar tarkibi orasidagi bo'shliqlardir padding. Biz har bir ustunga va o'rnatamiz padding-rightva tarkibni tekislash uchun har bir satrning boshi va oxiridagi o'rnini o'zgartirish uchun salbiydan foydalanamiz.padding-leftmargin
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, .containeryoki .container-fluidota-onani sozlash kerak bo‘lishi mumkin. Misol uchun, quyidagi misolda biz to'ldirishni bilan oshirdik .px-4:

Maxsus ustun to'ldirish

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>

Muqobil yechim sinf .rowbilan birga o'ram qo'shishdir:.overflow-hidden

Maxsus ustun to'ldirish

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>

Vertikal oluklar

.gy-*sinflar ustunlar yangi satrlarga o'ralganda, bir qator ichidagi vertikal truba kengligini boshqarish uchun ishlatilishi mumkin. Gorizontal oluklar singari, vertikal oluklar ham .rowsahifa oxiridan pastroq toshib ketishiga olib kelishi mumkin. .rowAgar bu sodir bo'lsa , siz .overflow-hiddensinfga o'ram qo'shasiz :

Maxsus ustun to'ldirish

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>

Gorizontal va vertikal oluklar

.g-*.overflow-hiddenclasses gorizontal truba kengligini boshqarish uchun ishlatilishi mumkin, quyidagi misol uchun biz kichikroq truba kengligidan foydalanamiz, shuning uchun o'rash sinfini qo'shishga hojat qolmaydi .

Maxsus ustun to'ldirish

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>

Qator ustunlar oluklar

Oluklar sinflari qator ustunlariga ham qo'shilishi mumkin . Quyidagi misolda biz javob beruvchi satr ustunlari va sezgir gutter sinflaridan foydalanamiz.

Qator ustuni

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>

Oluklar yo'q

Oldindan belgilangan panjara sinflarimizdagi ustunlar orasidagi oluklar yordamida olib tashlash mumkin .g-0. Bu barcha bevosita bolalar ustunlaridan salbiy margins .rowva gorizontalni olib tashlaydi .padding

Chetdan chekkagacha dizayn kerakmi? Toshib ketishining oldini olish uchun ota-onani .containeryoki .container-fluidqo'shing ..mx-0.row

Amalda, bu qanday ko'rinadi. Shuni yodda tutingki, siz bundan boshqa barcha oldindan belgilangan panjara sinflari (jumladan, ustunlar kengligi, sezgir darajalar, qayta tartiblashlar va boshqalar) bilan foydalanishda davom etishingiz mumkin.

.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>

Oluklarni almashtiring

Sinflar $guttersSass 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,
);