Nsu a ɛkɔ nsu mu
Gutters yɛ padding a ɛda wo columns ntam, a wɔde di dwuma de responsively space ne align content wɔ Bootstrap grid system no mu.
Sɛnea wɔyɛ adwuma
-
Gutters yɛ nsonsonoe a ɛda column content ntam, a horizontal
padding
. Yɛdepadding-right
nepadding-left
wɔ column biara so, na yɛde negative di dwumamargin
de offset saa wɔ row biara mfiase ne n’awiei de hyɛ nsɛm a ɛwɔ mu no hyia. -
Gutters fi ase wɔ
1.5rem
(24px
) a ɛtrɛw. Wei ma yɛtumi de yɛn grid no ne padding ne margin spacers scale no hyia. -
Wobetumi ayɛ nsakrae wɔ nsu a ɛkɔ nsu mu no mu ma ɛyɛ adwuma. Fa breakpoint-specific gutter classes di dwuma fa sesa horizontal gutters, vertical gutters, ne gutters nyinaa.
Nsu a ɛkɔ soro a ɛkɔ soro
.gx-*
wobetumi de adesua ahorow adi dwuma de ahwɛ gutter no trɛw a ɛkɔ soro no so. Ebia ɛho behia sɛ wɔyɛ nsakrae wɔ .container
anaa .container-fluid
ɔwofo no mu sɛ wɔde gutter akɛse nso di dwuma na wɔakwati nsu a ɛsen a wɔmpɛ, de padding utility a ɛne no hyia di dwuma a. Sɛ nhwɛso no, wɔ nhwɛso a edidi so yi mu no yɛde .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>
Ano aduru foforo ne sɛ wode wrapper bɛka .row
adesua .overflow-hidden
no ho:
<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>
Gutters a ɛda hɔ gyina hɔ
.gy-*
wobetumi de adesua ahorow adi dwuma de ahwɛ gutter no trɛw a ɛda hɔ no so. Te sɛ nsu a ɛkɔ soro no, nsu a ɛkɔ soro no betumi ama nsu a .row
ɛtɔ gu fam kakra wɔ kratafa bi awiei no ase. Sɛ eyi ba a, wode wrapper bi bɛka .row
adesua .overflow-hidden
no ho:
<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>
Horizontal & vertical nsu a ɛkɔ fam
.g-*
classes betumi adi dwuma de ahwɛ horizontal gutter widths no so, ma nhwɛso a edidi so yi yɛde gutter width ketewaa bi di dwuma, enti ɛho renhia sɛ yɛde .overflow-hidden
wrapper class no bɛka ho.
<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>
Row adum gutters
Wobetumi nso de gutter adesua ahorow aka row columns ho . Wɔ nhwɛsoɔ a ɛdidi soɔ yi mu no, yɛde responsive row columns ne responsive gutter classes di dwuma.
<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>
Gutters biara nni hɔ
Wobetumi de .g-0
. Eyi yi margin
s a enye no fi .row
ne nea ɛwɔ soro no padding
fi mmofra adum a ɛwɔ hɔ ntɛm nyinaa nyinaa mu.
Wohia adwini a efi ano kosi ano? Tow ɔwofo no gu .container
anaa .container-fluid
.
Wɔ nneyɛe mu no, sɛnea ɛte ni. Hyɛ no nsow sɛ wubetumi akɔ so de eyi adi dwuma wɔ grid adesua afoforo a wɔadi kan akyerɛkyerɛ mu nyinaa (a column trɛw, mmuae tiers, reorders, ne nea ɛkeka ho ka ho).
<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>
Sesa nsu a ɛkɔ nsu mu no
Wɔkyekye adesua ahorow no fi $gutters
Sass asase mfonini a wonya fi $spacers
Sass asase mfonini no mu.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);