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.
Lawv ua haujlwm li cas
-
Gutters yog qhov sib txawv ntawm cov ntsiab lus ntawm kab, tsim los ntawm kab rov tav
padding
. Peb teebpadding-right
thiabpadding-left
ntawm txhua kab, thiab siv qhov tsis zoomargin
los 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 .container
los yog .container-fluid
niam 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
:
<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>
Lwm txoj kev daws teeb meem yog ntxiv ib lub wrapper nyob ib ncig ntawm .row
lub .overflow-hidden
chav kawm:
<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>
Vertical gutters
.gy-*
cov chav kawm tuaj yeem siv los tswj cov kab ntsig ntsug qhov dav. Zoo li kab rov tav gutters, ntsug gutters tuaj yeem ua rau qee qhov dej ntws hauv qab .row
kawg ntawm nplooj ntawv. Yog tias qhov no tshwm sim, koj ntxiv ib lub wrapper ncig .row
nrog .overflow-hidden
chav kawm:
<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>
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-hidden
wrapper chav kawm.
<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>
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.
<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>
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 margin
ntawm .row
thiab kab rov tav padding
los ntawm txhua kab me nyuam tam sim ntawd.
Xav tau ib tug ntug-rau-ntug tsim? Tso niam txiv .container
los .container-fluid
.
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).
<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>
Hloov cov gutters
Cov chav kawm yog tsim los ntawm $gutters
Sass daim ntawv qhia uas tau txais los ntawm $spacers
Sass 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,
);