Ọgba mmiri

Gutters bụ padding dị n'etiti kọlụm gị, nke a na-eji na-anabata ohere na ịhazi ọdịnaya na sistemụ Bootstrap grid.

Na ibe a

Ka ha si arụ ọrụ

Gutters bụ oghere dị n'etiti ọdịnaya kọlụm, nke ejiri kehoraizin mebere padding. Anyị na-edobe padding-rightna padding-leftkọlụm ọ bụla, ma na-eji adịghị mma marginiji mebie nke ahụ na mmalite na njedebe nke ahịrị ọ bụla iji kwado ọdịnaya.
Ọgba mmiri na-amalite na 1.5rem( 24px) n'obosara. Nke a na-enye anyị ohere ijikọ grid anyị na nha nhata na oke oghere .
Enwere ike idozi olulu mmiri na-anabata ya. Jiri klaasị gọọta pụrụ iche na-agbaji ntụpọ iji gbanwee gọọmentị kwụ ọtọ, gọta kwụ ọtọ, na gọta niile.

Ọwa mmiri kwụ ọtọ

.gx-*enwere ike iji klaasị jikwaa obosara gutter kwụ ọtọ. Nne .containerma ọ bụ nna ma ọ bụ .container-fluidnne na nna nwere ike imeziwanye ma ọ bụrụ na a na-ejikwa nnukwu olulu mmiri iji zere ijubiga ihe ókè na-achọghị, na-eji ihe nkpuchi dakọtara. Dịka ọmụmaatụ, na ọmụmaatụ na-esote anyị ejirila .px-4:

padding kọlụm omenala

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

Ngwọta ọzọ bụ ịgbakwunye ihe mkpuchi .rowna .overflow-hiddenklas ahụ:

padding kọlụm omenala

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

Ọwa mmiri kwụ ọtọ

.gy-*enwere ike iji klas jikwaa obosara gotter kwụ ọtọ. Dị ka gọọmenti kwụ ọtọ, gọọlụ kwụ ọtọ nwere ike ime ka mmiri jubigara ókè n'okpuru .rowna njedebe nke ibe. Ọ bụrụ na nke a emee, ị ga-agbakwunye ihe mkpuchi .rowna .overflow-hiddenklaasị:

padding kọlụm omenala

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

Ọwa mmiri kwụ ọtọ na kwụ ọtọ

.g-*enwere ike iji klaasị jikwaa obosara gutter kwụ ọtọ, maka ihe atụ na-esonụ, anyị na-eji obere obosara gọta, yabụ na ọ gaghị adị mkpa ịgbakwunye .overflow-hiddenklas ihe mkpuchi.

padding kọlụm omenala

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

Ọwara ogidi ahịrị

Enwere ike ịgbakwunye klas gutter na ogidi ahịrị . N'ọmụmaatụ na-esote, anyị na-eji ogidi ahịrị na-anabata na klaasị gotter na-anabata.

Ahịrị kọlụm

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

Enweghị olulu mmiri

Enwere ike iwepụ gọọlụ n'etiti kọlụm dị na klaasị grid anyị eburu ụzọ wepụ .g-0. Nke a na-ewepụ ihe na-adịghị mma marginsite .rowna na kehoraizin paddingsi na kọlụm ụmụaka niile.

Chọrọ imewe akụkụ ruo n'ọnụ? Hapụ nne .containerma ọ bụ nna ma ọ bụ .container-fluid.

Na omume, nke a bụ ka ọ dị. Rịba ama na ị nwere ike ịga n'ihu na-eji nke a na klaasị grid ndị ọzọ akọpụtagoro (gụnyere obosara kọlụm, ọkwa na-anabata, ndezigharị, na ndị ọzọ).

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

Gbanwee ọwa mmiri

Ewubere klaasị site na $guttersmaapụ Sass nke eketara na $spacersmaapụ Sass.

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