Ba gouttières

Ba gouttières ezali padding 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é

html

<div class="container px-4 text-center">
  <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é

html

<div class="container overflow-hidden text-center">
  <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 na kati ya molongo tango ba colonnes ezo envelopper na ba lignes ya sika. 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é

html

<div class="container overflow-hidden text-center">
  <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é

html

<div class="container text-center">
  <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ɔ

html

<div class="container text-center">
  <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-fluidmpe bakisa .mx-0na mpo .rowna kopekisa kotonda.

Na pratique, tala ndenge ezo monana. Yeba okoki kokoba kosalela oyo na ba kelasi 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

html

<div class="row g-0 text-center">
  <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,
);