Gutters

Gutters binne de padding tusken jo kolommen, brûkt om responsyf romte te meitsjen en ynhâld yn te rjochtsjen yn it Bootstrap-rastersysteem.

Op dizze side

Hoe't se wurkje

Gutters binne de gatten tusken kolomynhâld, makke troch horizontale padding. Wy sette padding-righten padding-leftop elke kolom, en brûke negatyf marginte kompensearjen dat oan it begjin en ein fan elke rige te align ynhâld.
Goaten begjinne by 1.5rem( 24px) breed. Dit lit ús ús raster oerienkomme mei de skaal fan padding en marzje spacers .
Goaten kinne responsyf oanpast wurde. Brûk breakpoint-spesifike gutterklassen om horizontale goten, fertikale goaten en alle goaten te feroarjen.

Horizontale gevels

.gx-*klassen kinne brûkt wurde om te kontrolearjen de horizontale gutter widths. De .containerof .container-fluidâlder kin moatte wurde oanpast as gruttere goten wurde brûkt te foar te kommen net winske oerstreaming, mei help fan in oerienkommende padding nut. Bygelyks, yn it folgjende foarbyld hawwe wy de padding ferhege mei .px-4:

Oanpaste kolom padding

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>

In alternative oplossing is it tafoegjen fan in wrapper om 'e .rowmei de .overflow-hiddenklasse:

Oanpaste kolom padding

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>

Fertikale goaten

.gy-*klassen kinne brûkt wurde om te kontrolearjen de fertikale gutter widths binnen in rige doe't kolommen wrap nei nije rigels. Lykas de horizontale gutters kinne de fertikale goaten wat oerstreaming feroarsaakje ûnder de .rowoan 'e ein fan in side. As dit bart, foegje jo in wrapper .rowta mei de .overflow-hiddenklasse:

Oanpaste kolom padding

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>

Horizontale en fertikale goaten

.g-*klassen kinne brûkt wurde om te kontrolearjen de horizontale gutter widths, foar it folgjende foarbyld wy brûke in lytsere gutter breedte, dus der sil net nedich te foegjen de .overflow-hiddenwrapper klasse.

Oanpaste kolom padding

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>

Rige kolommen goten

Gutter-klassen kinne ek wurde tafoege oan rige kolommen . Yn it folgjende foarbyld brûke wy responsive rige kolommen en responsive gutterklassen.

Rige kolom

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>

Gjin geiten

De goten tusken kolommen yn ús foarôf definieare rasterklassen kinne wurde fuortsmiten mei .g-0. Dit smyt de negative margins út .rowen de horizontale paddingút alle direkte bern kolommen.

In edge-to-edge ûntwerp nedich? Drop de âlder .containerof .container-fluiden heakje .mx-0oan de .rowom foar te kommen oerlêst.

Yn 'e praktyk, hjir is hoe't it derút sjocht. Tink derom dat jo dit kinne trochgean mei alle oare foarôf definieare rasterklassen (ynklusyf kolombreedten, responsive tiers, opnij oarders, en mear).

.col-sm-6 .col-md-8

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

Feroarje de goaten

Klassen wurde boud fan de $guttersSass-kaart dy't erfd is fan de $spacersSass-kaart.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);