Guutaa

Gutters jechuun padding tarjaawwan kee gidduu jiruudha, deebii kennuudhaan qabiyyee sirna tarjaa Bootstrap keessatti iddoo fi qindeessuuf fayyadamu.

Fuula kana irratti

Akkaataa itti hojjetan

Gutters qaawwa qabiyyee tarjaa gidduu jiruudha, horizontal tiin uumame padding. Tokkoon tokkoo tarjaa irratti padding-rightfi saagna, fi qabiyyee qindeessuuf sana jalqaba fi dhuma tarree tokkoon tokkoo irratti ofseet gochuuf padding-leftnegaatiivii fayyadamna .margin
Gutters bal'inaan 1.5rem( ) irraa jalqabu . 24pxKunis giiridii keenya iskeelii padding fi margin spacers wajjin walsimsiisuuf nu dandeessisa.
Gutters deebii kennuudhaan sirreeffamuu danda'u. Guutaroota qajeeloo, gutter dhaabbataa, fi gutter hunda fooyyessuuf gitaalee gutter qabxii cabbii adda ta'an fayyadami.

Gutters horizontal ta’an

.gx-*gita bal'ina gutter horizontal to'achuuf fayyadamuun ni danda'ama. .containerYoo ykn warri .container-fluidsirreeffamuu barbaachisuu danda'a yoo gutters gurguddoon akkasumas fayyadaman dhangala'aa hin barbaadamne hambisuuf, faayidaa padding walsimsiisu fayyadamuun. Fakkeenyaaf, fakkeenya armaan gadii keessatti padding akka .px-4:

Padding tarjaa amala

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

Furmaanni filannoo biraa marfata naannoo the .rowwith the .overflow-hiddenclass itti dabaluudha:

Padding tarjaa amala

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

Gutters dhaabbataa ta’an

.gy-*gita bal'ina gutter dhaabbataa to'achuuf fayyadamuun ni danda'ama. Akkuma gutters horizontal, gutters verticals .rowdhuma fuula tokkoo gadiitti dhangala'aa tokko tokko fiduu danda'u. Yoo kun uumame, gita .rowwaliin marfata naannoo dabalta :.overflow-hidden

Padding tarjaa amala

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

Gutters horizontal & dhaabbataa ta’an

.g-*gitaalee bal'ina gutter horizontal to'achuuf fayyadamuun ni danda'ama, fakkeenya armaan gadiitiif bal'ina gutter xiqqaa fayyadamna, kanaaf .overflow-hiddengita marfataa dabaluu hin barbaachisu.

Padding tarjaa amala

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

Tarree tarreewwan gutters

Gitoota gutter akkasumas tarjaa tarree irratti dabalamuu danda'u . Fakkeenya armaan gadii keessatti, tarjaawwan tarree deebii kennanii fi gitaalee gutter deebii kennan fayyadamna.

Tarree tarree

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

Gutters hin qabu

Gutters tarjaawwan gidduu gita tarjaa keenya dursee ibsaman keessatti .g-0. Kunis tarjaa ijoollee battalaa hunda irraa margins negaatiivii .rowfi tarjaawwan horizontaalaa ni haqa.padding

Dizaayinii qarqara irraa gara qarqaraatti barbaadduu? Warra .containerykn .container-fluid.

Qabatamaan akkas fakkaata. Hubadhu kana gita tarjaa durtii ibsaman biroo hunda waliin fayyadamuu itti fufuu dandeessa (bal'ina tarjaa, sadarkaa deebii kennuu, irra deebiin tartiiba, fi kkf dabalatee).

.kol-sm-6 .kol-md-8 jedhamuun beekama

.kol-6 .kol-md-4 jedhamuun beekama

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

Gutters jijjiiri

Kutaawwan kaartaa Sass irraa kan ijaaraman yoo $guttersta'u kunis kaartaa Sass irraa dhaala $spacers.

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