Imijelo
Iigutter zilukhuko phakathi kweekholamu zakho, ezisetyenziselwa ukuphendula indawo kunye nokulungelelanisa umxholo kwinkqubo yegridi yeBootstrap.
Indlela abasebenza ngayo
-
Imijelo yizikhewu phakathi komxholo wekholomu, owenziwe ngokuthe tye
padding
. Sisetapadding-right
kwayepadding-left
kwikholamu nganye, kwaye sisebenzise i-negativemargin
ukulungisa oko ekuqaleni nasekupheleni komqolo ngamnye ukulungelelanisa umxholo. -
Iigatha ziqala ku
1.5rem
(24px
) ububanzi. Oku kusivumela ukuba sifanise igridi yethu kunye ne- padding kunye ne-margin spacers isikali. -
Iigutters zinokulungiswa ngokuphendulayo. Sebenzisa i-breakpoint-specific gutter classes ukuguqula i-gutters ezithe tye, ii-gutters ezithe nkqo, kunye nazo zonke iigatha.
Iigatha ezithe tye
.gx-*
iiklasi zingasetyenziselwa ukulawula ububanzi bomjelo othe tye. Umzali .container
okanye .container-fluid
umzali unokufuna ukulungiswa ukuba iigatha ezinkulu zisetyenziselwa ukuphepha ukuphuphuma okungafunekiyo, kusetyenziswa into ehambelanayo yokudibanisa. Umzekelo, kulo mzekelo ulandelayo sonyuse i-padding nge .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>
Esinye isisombululo kukongeza isisongelo esijikeleze .row
iklasi .overflow-hidden
:
<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>
Iigatha ezithe nkqo
.gy-*
Iiklasi zingasetyenziselwa ukulawula ububanzi begutter ethe nkqo. Njengeegatha ezithe tye, iigatha ezithe nkqo zinokubangela ukuphuphuma okuthile ngaphantsi .row
kwesiphelo sephepha. Ukuba oku kuyenzeka, wongeza usonga .row
kunye .overflow-hidden
neklasi:
<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>
Iigatha ezithe tyaba kunye nezithe nkqo
.g-*
iiklasi zingasetyenziselwa ukulawula ububanzi bomjelo othe tye, kulo mzekelo ulandelayo sisebenzisa ububanzi obuncinci begutter, ngoko ke akuyi kubakho mfuneko yokongeza .overflow-hidden
udidi lwe-wrapper.
<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>
Iikholamu zomqolo iigatha
Iiklasi ze-Gutter nazo zinokongezwa kwiikholamu zomqolo . Kulo mzekelo ulandelayo, sisebenzisa iikholamu zomqolo ophendulayo kunye neeklasi eziphendulayo zegutter.
<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>
Akukho zigatha
Imijelo phakathi kweentsika kwiiklasi zethu zegridi ezichazwe kwangaphambili zinokususwa nge .g-0
. Oku kususa i-negative margin
s ukusuka .row
kunye ne-horizontal padding
kuzo zonke iikholamu zabantwana zangoku.
Ngaba ufuna uyilo olusuka kumphetho ukuya kumphetho? Lahla umzali .container
okanye .container-fluid
.
Ngokwenza, nantsi indlela ekhangeleka ngayo. Qaphela ungaqhubeka nokusebenzisa oku kunye nazo zonke ezinye iiklasi zegridi ezichazwe kwangaphambili (kubandakanya ububanzi bekholamu, imigangatho ephendulayo, uodolo ngokutsha, kunye nokunye).
<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>
Shintsha iigutters
Iiklasi zakhiwe kwimephu ye- $gutters
Sass ezuzwe njengelifa $spacers
kwimephu ye-Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);