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ňliklerine gözegçilik etmek üç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

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

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

Columnörite sütün padding

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

Dik çukurlar

.gy-*sapaklar dik çukur giňliklerine gözegçilik etmek üçin 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

Column��rite sütün padding

Columnörite sütün padding

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

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

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

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

Ç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 ýa- .containerda .container-fluid.

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

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

Ç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,
);