Ba gouttières
Ba gouttières ezali remplissage entre ba colonnes na yo, esalemi pona ko espacer responsivement pe ko aligner contenus na système ya grille Bootstrap.
Ndenge oyo basalaka
-
Ba gouttières ezali ba espaces entre contenus ya colonne, oyo esalemi na horizontal
padding
. Totiepadding-right
mpepadding-left
na colonne moko na moko, mpe tosalelaka négatifmargin
mpo na ko compenser yango na ebandeli mpe na nsuka ya molongo moko na moko mpo na ko aligner contenus. -
Ba gouttières ebandaka na
1.5rem
(24px
) largeur. Yango epesaka biso nzela ya kokokanisa grille na biso na échelle ya padding mpe ya ba espaceurs ya marge . -
Ba gouttières ekoki kozala répondablement ajusté. Salelá ba classes ya gouttières spécifiques ya point de rupture mpo na ko modifier ba gouttières horizontales, ba gouttières verticales, mpe ba gouttières nionso.
Ba gouttières horizontales
.gx-*
ba classes ekoki kosalelama pona ko contrôler ba largeurs ya gouttière horizontale. Ba .container
to .container-fluid
moboti ekoki kozala na mposa ya kobongisa soki ba gouttières ya minene esalelami mpe mpo na koboya kotonda oyo elingi te, kosalelaka utilitaire ya padding oyo ekokani. Ndakisa, na ndakisa oyo elandi tobakisaki padding 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>
Solution mosusu ezali ya kobakisa enveloppe autour ya .row
na .overflow-hidden
classe:
<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>
Ba gouttières ya semba
.gy-*
ba classes ekoki kosalelama pona ko contrôler ba largeurs ya gouttière verticale. Lokola ba gouttières horizontales, ba gouttières verticales ekoki kosala que mua débordement na se ya .row
na suka ya page moko. Soki likambo yango esalemi, obakisi enveloppe moko zingazinga .row
na .overflow-hidden
kelasi:
<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>
Ba gouttières horizontales & verticales
.g-*
ba classes ekoki kosalelama pona ko contrôler ba largeurs ya gouttière horizontale, pona exemple oyo elandi tosalelaka largeur ya gouttière ya muke, donc ekozala na besoin ya kobakisa .overflow-hidden
classe ya enveloppe te.
<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>
Molongo ya makonzí ba gouttières
Ba classes ya gouttière ekoki pe kobakisa na ba colonnes ya molongo . Na ndakisa oyo elandi, tosalelaka makonzí ya molongo oyo eyanolaka mpe bakelasi ya gouttière oyo eyanolaka.
<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>
Ba gouttières te
Ba gouttières entre ba colonnes na ba classes na biso ya grille pré-définies ekoki ko longwa na .g-0
. Yango elongolaka margin
s négatif na .row
mpe horizontal padding
na ba colonnes nionso ya bana ya mbala moko.
Ozali na mposa ya design ya bord-à-edge? Bwaka moboti .container
to .container-fluid
.
Na pratique, tala ndenge ezo monana. Liyebisi okoki kokoba kosalela oyo na bakelasi mosusu nyonso ya grille oyo esili kolimbolama liboso (elongo na bonene ya makonzí, ba niveaux ya eyano, ba réordonnées, mpe mingi mosusu).
<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>
Bobongola ba gouttières
Ba classes etongami na $gutters
carte ya Sass oyo e hériter na $spacers
carte 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,
);