Gutlar

Gutlar, “Bootstrap” grid ulgamyndaky mazmuny giňeltmek we mazmuny deňleşdirmek üçin ulanylýan sütünleriňiziň arasynda ýerleşýär.

Bu sahypada

Olaryň nähili işleýändigi

Gutlar, keseligine döredilen sütün mazmunynyň arasyndaky boşluklardyr padding. Her sütüni goýýarys padding-rightwe mazmuny deňleşdirmek üçin her hataryň başynda we ahyrynda öwezini dolmak padding-leftüçin negatiw ulanýarys .margin
Çukurlar 1.5rem( 24px) giňlikde başlaýar. Bu, gözenegimizi padding we margin spacers şkalasyna laýyklaşdyrmaga mümkinçilik berýär.
Çukurlary jogapkärçilik bilen düzedip bolýar. Gorizontal çukurlary, dik çukurlary we ähli çukurlary üýtgetmek üçin böleklere mahsus çukur sapaklaryny ulanyň.

Gorizontal çukurlar

.gx-*keseligine gorizontal çukur giňligini dolandyrmak üçin ulanylyp bilner. Gabat gelýän padding programmasyny ulanyp, islenilmeýän akymdan gaça durmak üçin has uly çukurlar ulanylsa, ene .container- .container-fluidatany düzetmeli bolup biler. Mysal üçin, aşakdaky mysalda paddingi köpeltdik .px-4:

Columnörite sütün padding

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>

Başga bir çözgüt , synp .rowbilen bir örtük goşmak:.overflow-hidden

Columnörite sütün padding

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>

Dik çukurlar

.gy-*Sütünler täze setirlere gurlanda, dik çukur giňligini yzygiderli dolandyrmak üçin sapaklar ulanylyp bilner. .rowGorizontal çukurlar ýaly, dik çukurlar sahypanyň soňundaky aşaky akymlara sebäp bolup biler . Şeýle ýagdaý ýüze çyksa, synp .rowbilen bir örtük goşarsyňyz :.overflow-hidden

Columnörite sütün padding

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 we dik çukurlar

.g-*.overflow-hiddensapaklar gorizontal çukur giňliklerine gözegçilik etmek üçin ulanylyp bilner, aşakdaky mysal üçin has kiçi çukur giňligini ulanýarys, şonuň üçin örtük synpyny goşmagyň zerurlygy bolmaz .

Columnörite sütün padding

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>

Setir sütünleri

Gutter sapaklaryny hatar sütünlere hem goşup bolýar . Aşakdaky mysalda, jogap hatar sütünlerini we täsirli gutujyk synplaryny ulanýarys.

Setir sütüni

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>

Çukur ýok

Öňünden kesgitlenen gözenek synplarymyzdaky sütünleriň arasyndaky boşluklary aýryp bolýar .g-0. Bu , ähli çaga sütünlerinden otrisatel we gorizontal marginaýyrýar ..rowpadding

Gyrasy dizaýn gerekmi? Ene- atany taşlaň .containerýa - da .container-fluidaşmagynyň öňüni alyň..mx-0.row

Iş ýüzünde, ine, görnüşi. Muny öňünden kesgitlenen gözenek synplarynyň hemmesi bilen ulanmagy dowam etdirip bilersiňiz (sütün giňligi, täsirli derejeler, tertipler we ş.m.).

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

Çukurlary çalyşyň

$guttersSapaklar Sass kartasyndan miras galan Sass kartasyndan gurulýar $spacers.

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