Gutters

Gutters yog cov padding nruab nrab ntawm koj cov kab, siv los teb qhov chaw thiab kho cov ntsiab lus hauv Bootstrap kab sib chaws.

Ntawm nplooj ntawv no

Lawv ua haujlwm li cas

Gutters yog qhov sib txawv ntawm cov ntsiab lus ntawm kab, tsim los ntawm kab rov tav padding. Peb teeb padding-rightthiab padding-leftntawm txhua kab, thiab siv qhov tsis zoo marginlos cuam tshuam qhov pib thiab qhov kawg ntawm txhua kab los ua kom cov ntsiab lus.
Gutters pib ntawm 1.5rem( 24px) dav. Qhov no tso cai rau peb kom phim peb daim phiaj rau padding thiab margin spacers scale.
Gutters tuaj yeem hloov kho. Siv cov chav kawm tshwj xeeb gutter los hloov kho kab rov tav gutters, ntsug gutters, thiab tag nrho cov gutters.

Kab rov tav gutters

.gx-*cov chav kawm tuaj yeem siv los tswj cov kab rov tav gutter widths. Tus niam txiv .containerlos yog .container-fluidniam txiv yuav tsum tau hloov kho yog tias siv cov kwj dej loj dua kom tsis txhob muaj qhov tsis xav tau, siv cov khoom siv sib txuam padding. Piv txwv li, hauv qhov piv txwv hauv qab no peb tau nce lub padding nrog .px-4:

Kev cai kem padding

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>

Lwm txoj kev daws teeb meem yog ntxiv ib lub wrapper nyob ib ncig ntawm .rowlub .overflow-hiddenchav kawm:

Kev cai kem padding

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>

Vertical gutters

.gy-*Cov chav kawm tuaj yeem siv los tswj cov kab ntsug ntsug qhov dav hauv ib kab thaum txhua kab qhwv rau kab tshiab. Zoo li kab rov tav gutters, ntsug gutters tuaj yeem ua rau qee qhov dej ntws hauv qab .rowntawm qhov kawg ntawm nplooj ntawv. Yog tias qhov no tshwm sim, koj ntxiv ib lub wrapper ncig .rownrog .overflow-hiddenchav kawm:

Kev cai kem padding

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>

Kab rov tav & ntsug gutters

.g-*Cov chav kawm tuaj yeem siv los tswj cov kab rov tav gutter dav, rau qhov piv txwv hauv qab no peb siv qhov dav me me, yog li yuav tsis tas yuav ntxiv cov .overflow-hiddenwrapper chav kawm.

Kev cai kem padding

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>

Kab kab gutters

Cov chav kawm Gutter kuj tuaj yeem ntxiv rau kab kab . Hauv qhov piv txwv hauv qab no, peb siv cov kab lus teb kab lus thiab cov chav kawm gutter teb.

Kab kab

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>

Tsis muaj gutters

Cov gutters ntawm txhua kab hauv peb cov chav kawm ntawv teev tseg ua ntej tuaj yeem raug tshem tawm nrog .g-0. Qhov no tshem tawm qhov tsis zoo marginlos ntawm .rowthiab kab rov tav paddinglos ntawm txhua kab me nyuam tam sim ntawd.

Xav tau ib tug ntug-rau-ntug tsim? Tso cov niam txiv .containerlos yog .container-fluidthiab ntxiv .mx-0rau .rowkom tsis txhob hla dhau.

Hauv kev xyaum, ntawm no yog qhov nws zoo li. Nco ntsoov koj tuaj yeem txuas ntxiv siv qhov no nrog rau tag nrho lwm cov chav kawm ntawv teev tseg ua ntej (xws li kab dav dav, cov qib teb, rov txiav txim dua, thiab ntau dua).

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

Hloov cov gutters

Cov chav kawm yog tsim los ntawm $guttersSass daim ntawv qhia uas tau txais los ntawm $spacersSass daim ntawv qhia.

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