Gutters

Gutters waa suufka u dhexeeya tiirarkaaga, oo loo isticmaalo in si taxaddar leh meel bannaan loo dhigo oo loo waafajiyo waxa ku jira nidaamka xadhkaha Bootstrap.

Boggan

Sida ay u shaqeeyaan

Gutters waa farqiga u dhexeeya nuxurka tiirka, oo ay abuurtay jiif padding. Waxaan dhignay padding-rightoo padding-leftdul saarnaa tiir kasta, waxaana isticmaalnaa taban marginsi aan u dhigno bilowga iyo dhammaadka saf kasta si aan u waafajino nuxurka.
Gutters waxay ka bilaabmaan 1.5rem( 24px) ballaaran. Tani waxay noo ogolaanaysaa inaan ku dhigno shabaqyadayada suufka iyo cabbirka meelaha bannaan.
Gutters si taxadar leh ayaa loo hagaajin karaa. Isticmaal fasalada maroodiga u gaarka ah si aad wax uga beddesho maroojisyada jiifka ah, maroojisyada toosan, iyo dhammaan marinnada biyaha.

Biyo mareenada toosan

.gx-*fasalada waxaa loo isticmaali karaa in lagu xakameeyo ballaadhka maroodiga jiifka ah. Waalidka .containerama .container-fluidwaalidka ayaa laga yaabaa in ay u baahdaan in la hagaajiyo haddii sidoo kale la isticmaalo mareenada waaweyn si looga fogaado qulqulka aan la rabin, iyada oo la isticmaalayo qalab suuf ah oo ku habboon. Tusaale ahaan, tusaalaha soo socda waxa aanu ku kordhinay suufka .px-4:

Tiirka gaarka ah

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>

Xalka beddelka ah waa in lagu daro duubka agagaarka .rowfasalka .overflow-hidden:

Tiirka gaarka ah

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>

Godad toosan

.gy-*fasallada waxaa loo isticmaali karaa in lagu xakameeyo ballaadhka maroodiga toosan ee isku xigta marka tiirarku ku duubaan khadadka cusub. Sida mareenada jiifka ah, majaraha toosan waxay sababi karaan qulqulka qaar ka hooseeya .rowdhamaadka bogga. Hadday tani dhacdo, waxaad fasalka .rowku dartay duub:.overflow-hidden

Tiirka gaarka ah

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>

Godad toosan & toosan

.g-*fasalada waxaa loo isticmaali karaa in lagu xakameeyo ballaadhka maroodiga jiifka ah, tusaale ahaan tusaalahan soo socda waxaan isticmaalnaa ballac yar oo maroojis ah, markaa ma jiri doonto baahi loo qabo in lagu daro .overflow-hiddenfasalka duubista.

Tiirka gaarka ah

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>

Jidadka safka ah

Fasallada jeexjeexyada sidoo kale waxaa lagu dari karaa tiirarka safka . Tusaalahan soo socda, waxaanu isticmaalnaa tiirar saf ah oo jawaab celin ah iyo fasallo maroojis ah oo ka jawaabaya.

Tiirka safka

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>

Biyo mareen

Godadka u dhexeeya tiirarka ee fasaladayada jaranjarada ee horay loo sii qeexay waxa lagu saari karaa .g-0. Tani waxay meesha ka saaraysaa xumaanta marginiyo .rowjiifka paddingdhammaan tiirarka carruurta ee dhow.

Ma u baahan tahay naqshad gees ilaa gees ah? Tuur waalidka .containerama ku .container-fluiddar .mx-0si .rowaad uga hortagto qulqulka.

Ficil ahaan, halkan waa sida ay u egtahay. Ogsoonow inaad ku sii wadan karto isticmaalka kan dhammaan fasalada kale ee saad u qeexan (ay ku jiraan ballaadhka tiirka, heerarka jawaabta, dib u dalbashada, iyo in ka badan).

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

Beddel majaraha

Fasallada waxaa laga dhisay $gutterskhariidadda Sass ee laga dhaxlo $spacerskhariidadda Sass.

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