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.

Na lokasa oyo

Ndenge oyo basalaka

Ba gouttières ezali ba espaces entre contenus ya colonne, oyo esalemi na horizontal padding. Totie padding-rightmpe padding-leftna colonne moko na moko, mpe tosalelaka négatif marginmpo 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 .containerto .container-fluidmoboti 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:

Padding ya colonne personnalisé

<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 .rowna .overflow-hiddenclasse:

Padding ya colonne personnalisé

<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 .rowna suka ya page moko. Soki likambo yango esalemi, obakisi enveloppe moko zingazinga .rowna .overflow-hiddenkelasi:

Padding ya colonne personnalisé

<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-hiddenclasse ya enveloppe te.

Padding ya colonne personnalisé

<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.

Kolona ya molɔngɔ

<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 margins négatif na .rowmpe horizontal paddingna ba colonnes nionso ya bana ya mbala moko.

Ozali na mposa ya design ya bord-à-edge? Bwaka moboti .containerto .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).

.kolo-sm-6 .kol-md-8

.kol-6 .kol-md-4

<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 $gutterscarte ya Sass oyo e hériter na $spacerscarte 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,
);