Diphaephe tša go tšhela meetse
Di-gutter ke padding magareng ga dikholomo tša gago, yeo e šomišwago go sekgoba ka go arabela le go logaganya diteng ka go tshepedišo ya keriti ya Bootstrap.
Kamoo di šomago ka gona
-
Di-gutter ke dikgoba magareng ga diteng tša kholomo, tšeo di hlotšwego ke go rapalala
padding
. Re beakanyapadding-right
lepadding-left
godimo ga kholomo ye nngwe le ye nngwe, gomme re šomiša negativemargin
go offset seo mathomong le mafelelong a mothalo wo mongwe le wo mongwe go logaganya diteng. -
Di-gutter di thoma ka
1.5rem
(24px
) ka bophara. Se se re dumelela go swantšha keriti ya rena le sekala sa padding le margin spacers . -
Gutters ka arabela fetolwa. Diriša dihlopha tša diphaephe tše di itšego tša breakpoint go fetoša diphaephe tše di rapaletšego, diphaephe tše di emego thwii le diphaephe ka moka.
Di-gutter tše di rapaletšego
.gx-*
diklase ka sebediswa ho laola rapameng gutter widths. Motswadi .container
goba .container-fluid
motswadi a ka swanelwa ke go lokišwa ge e ba diphaephe tše dikgolo le tšona di dirišwa go phema go tlala mo go sa nyakegego, go dirišwa sedirišwa sa go tlatša seo se swanago. Mohlala, mohlaleng o latelang re okeditše padding ka .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>
Tharollo e nngwe ke go oketša sephuthelwana go dikologa .row
ka .overflow-hidden
sehlopha:
<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>
Di-gutter tše di emego thwii
.gy-*
diklase ka sebediswa ho laola paatsepama gutter widths. Go swana le diphaephe tše di rapaletšego, diphaephe tše di emego thwii di ka baka go tlala mo gongwe ka tlase ga .row
mafelelong a letlakala. Ge se se direga, o tlaleletša ka sephuthelwana go dikologa .row
le .overflow-hidden
sehlopha:
<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>
Di-gutter tše di rapaletšego & tše di emego thwii
.g-*
diklase di ka šomišwa go laola bophara bja gutter bjo bo rapaletšego, bakeng sa mohlala wo o latelago re diriša bophara bjo bonyenyane bja gutter, ka gona go ka se be le tlhokego ya go oketša .overflow-hidden
sehlopha sa sephuthedi.
<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>
Mothaladi dikholomo gutters
Diklase tša diphaephe le tšona di ka okeletšwa go dikholomo tša mothalo . Mohlaleng wo o latelago, re šomiša dikholomo tša mothaladi tše di arabelago le diklase tša gutter tše di arabelago.
<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>
Ga go na diphaephe tša go tšhela meetse
Diphaephe magareng ga dikholomo ka diklaseng tša rena tša keriti tše di hlalošitšwego e sa le pele di ka tlošwa ka .g-0
. Se se tloša margin
s ye mpe go tšwa .row
le ye e rapaletšego padding
go tšwa go dikholomo ka moka tša bana tša kgauswi.
O hloka tlhamo ya go tloga mošito go ya mošito? Lahlela motswadi .container
goba .container-fluid
.
Ka go diragatša, mo ke ka fao e lebelegago ka gona. Hlokomela o ka tšwela pele go šomiša se ka diklase tše dingwe ka moka tša keriti tše di hlalošitšwego e sa le pele (go akaretšwa bophara bja dikholomo, magato a go arabela, ditaelo gape, le tše dingwe).
<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>
Fetola di-gutter
Diklase di agilwe go tšwa $gutters
mmapeng wa Sass wo o abetšwego go tšwa $spacers
mmapeng wa Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);