Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
in English

Gutlar

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

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
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
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ňligini dolandyrmak üç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
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
Columnörite sütün padding
Columnörite sütün padding
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
Setir sütüni
Setir sütüni
Setir sütüni
Setir sütüni
Setir sütüni
Setir sütüni
Setir sütüni
Setir sütüni
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,
);