Gutera
Gutera ni padi hagati yinkingi zawe, zikoreshwa kumwanya ushimishije no guhuza ibiri muri sisitemu ya Bootstrap.
Uburyo bakora
-
Imyanda ni icyuho kiri hagati yinkingi, cyakozwe na horizontal
padding
. Dushirahopadding-right
nopadding-left
kuri buri nkingi, kandi dukoreshe ibibimargin
kugirango dusibe ko mugitangira nimpera ya buri murongo kugirango duhuze ibirimo. -
Imyanda itangirira kuri
1.5rem
(24px
) ubugari. Ibi biradufasha guhuza gride yacu kuri padding na margin spacers umunzani . -
Imyanda irashobora guhindurwa neza. Koresha ibice byihariye byo gutondeka kugirango uhindure imiyoboro itambitse, imiyoboro ihanamye, hamwe n'amazi yose.
Umuyoboro utambitse
.gx-*
amasomo arashobora gukoreshwa mugucunga ubugari bwa horizontal. Umubyeyi .container
cyangwa .container-fluid
umubyeyi arashobora gukenera guhindurwa niba imiyoboro minini ikoreshwa nayo kugirango wirinde kurengerwa, udakoresheje padi yingirakamaro. Kurugero, murugero rukurikira twongereye padi hamwe na .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>
Ubundi buryo bwo gukemura ni ukongeramo igipfunyika hafi .row
yishuri .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>
Umuyoboro uhagaze
.gy-*
amasomo arashobora gukoreshwa mugucunga vertical gutter ubugari. Kimwe na horizontal ya horizontal, vertical vertical irashobora gutera kurengerwa munsi .row
yurupapuro rwurupapuro. Niba ibi bibaye, wongeyeho igipfunyika .row
hamwe .overflow-hidden
nishuri:
<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>
Gorizontal & vertical gutter
.g-*
amasomo arashobora gukoreshwa mugucunga ubugari bwa horizontal, kurugero rukurikira dukoresha ubugari buto buto, ntabwo rero bizaba ngombwa kongeramo urwego .overflow-hidden
.
<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>
Imirongo yumurongo
Amasomo ya Gutter arashobora kandi kongerwaho kumurongo . Murugero rukurikira, dukoresha umurongo utanga umurongo winkingi hamwe nibisubizo byamazi.
<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>
Nta miyoboro
Imyanda iri hagati yinkingi mubyiciro byateganijwe mbere ya grid irashobora gukurwaho hamwe .g-0
. Ibi bivanaho ibintu bibi margin
biva kuri .row
na horizontal padding
kuva abana bose bahita.
Ukeneye igishushanyo mbonera? Kureka ababyeyi .container
cyangwa .container-fluid
.
Mu myitozo, dore uko isa. Icyitonderwa urashobora gukomeza gukoresha ibi hamwe nibindi byose byateganijwe mbere ya gride (harimo ubugari bwinkingi, urwego rwitabira, reorders, nibindi byinshi).
<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>
Hindura imyanda
Amasomo yubatswe kuva ku $gutters
ikarita ya Sass yarazwe ku $spacers
ikarita ya Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);