Ama-Gutters
Ama-Gutters yi-padding phakathi kwamakholomu akho, asetshenziselwa ukusabela isikhala nokuqondanisa okuqukethwe ohlelweni lwegridi ye-Bootstrap.
Basebenza kanjani
-
Amagatha ayizikhala phakathi kokuqukethwe kwekholomu, adalwe ngokuvundlile
padding
. Sisethapadding-right
nakukholomupadding-left
ngayinye, futhi sisebenzisa negativemargin
ukuze sisuse lokho ekuqaleni nasekupheleni komugqa ngamunye ukuze siqondanise okuqukethwe. -
Amagatha aqala kokuthi
1.5rem
(24px
) ububanzi. Lokhu kusivumela ukuthi sifanise igridi yethu nesikali se- padding kanye ne-margin spacers . -
Ama-gutters angalungiswa ngokuphendula. Sebenzisa amakilasi e-gutter aqondene ne-breakpoint ukuze ulungise ama-gutters avundlile, ama-gutters aqondile, nawo wonke ama-gutters.
Ama-gutters avundlile
.gx-*
amakilasi angasetshenziswa ukulawula ububanzi be-gutter obuvundlile. Umzali .container
noma .container-fluid
umzali angase adinge ukulungiswa uma ama-gutters amakhulu esetshenziswa futhi ukugwema ukuchichima okungafuneki, kusetshenziswa insiza yokunamathisela ehambisanayo. Isibonelo, esibonelweni esilandelayo sikhulise ukuphedi 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 isixazululo ukufaka isembozo esizungeze .row
ikilasi .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>
Ama-gutters aqondile
.gy-*
amakilasi angasetshenziswa ukulawula ububanzi obuqondile be-gutter. Njengamagatha avundlile, amagatha amile angabangela ukuchichima okuthile ngezansi .row
ekugcineni kwekhasi. Uma lokhu kwenzeka, wengeza i-wrapper ezungeze .row
nekilasi .overflow-hidden
:
<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>
Amagatha avundlile & mpo
.g-*
amakilasi angasetshenziswa ukulawula ububanzi be-gutter obuvundlile, isibonelo esilandelayo sisebenzisa ububanzi obuncane be-gutter, ngakho-ke ngeke kube nesidingo sokwengeza .overflow-hidden
isigaba se-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>
Amakholomu emigqa ama-gutters
Amakilasi e-Gutter nawo angangezwa kumakholomu emigqa . Esibonelweni esilandelayo, sisebenzisa amakholomu emigqa esabelayo kanye namakilasi e-gutter aphendulayo.
<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>
Awekho ama-gutters
Ama-gutter phakathi kwamakholomu kumakilasi ethu egridi achazwe kusengaphambili angasuswa ngokuthi .g-0
. Lokhu kususa okuthi-negethivu u- margin
s kusuka .row
kanye nokuvundlile padding
kuwo wonke amakholomu ezingane.
Udinga idizayini esukela konqenqemeni ukuya konqenqemeni? Lahla umzali .container
noma .container-fluid
.
Ngokusebenza, nansi indlela ebukeka ngayo. Qaphela ukuthi ungaqhubeka nokusebenzisa lokhu nawo wonke amanye amakilasi egridi achazwe ngaphambilini (okuhlanganisa ububanzi bekholomu, izigaba ezisabelayo, ukuhlela kabusha, nokuningi).
<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 ama-gutters
Amakilasi akhiwe kumephu ye- $gutters
Sass ezuzwa njengefa $spacers
kumephu 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,
);