Ọ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

Otú 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 maka nkwụsịtụ iji gbanwee gọta 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

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>

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

padding kọlụm omenala

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>

Ọwa mmiri kwụ ọtọ

.gy-*enwere ike iji klaasị jikwaa obosara gotter kwụ ọtọ n'ime ahịrị mgbe ogidi kechie n'ahịrị ọhụrụ. 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

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>

Ọ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

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>

Ọ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

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>

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ụ? Tufuo nne na nna .containerma ọ bụ .container-fluidtinye .mx-0na ya .rowiji gbochie oke mmiri.

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

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>

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