Gutters
Gutters sinn d'Padding tëscht Äre Sailen, benotzt fir reaktiounsfäeger Plaz an Inhalt am Bootstrap Gitter System ze alignéieren.
Wéi si schaffen
-
Gutters sinn d'Lücken tëscht Kolonninhalt, erstallt duerch horizontal
padding
. Mir setzenpadding-right
anpadding-left
op all Kolonn, a benotzen negativmargin
fir dat am Ufank an Enn vun all Zeil ze kompenséieren fir Inhalt ze alignéieren. -
Gutters fänken un
1.5rem
(24px
) breet. Dëst erlaabt eis eist Gitter mat der Padding a Margin Spacer Skala ze passen. -
Gutters kënnen reaktiounsfäeger ugepasst ginn. Benotzt breakpoint-spezifesch Rennen Klassen fir horizontal Rennen, vertikal Rennen an all Rennen z'änneren.
Horizontal Rennen
.gx-*
Klassen kënne benotzt ginn fir d'horizontal gutter Breet ze kontrolléieren. Den .container
oder .container-fluid
Elterendeel muss ugepasst ginn wann och méi grouss Rennen benotzt ginn fir ongewollte Iwwerschwemmungen ze vermeiden, mat engem passenden Padding-Utility. Zum Beispill, am folgende Beispill hu mir d'Padding erhéicht mat .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>
Eng alternativ Léisung ass e Wrapper ronderëm de .row
mat der .overflow-hidden
Klass ze addéieren:
<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>
Vertikal Rennen
.gy-*
Klassen kënne benotzt ginn fir d'vertikal Rennenbreet ze kontrolléieren. Wéi déi horizontal Rennen, kënnen déi vertikale Rennen e puer Iwwerschwemmungen ënner .row
dem Enn vun enger Säit verursaachen. Wann dëst geschitt, füügt Dir e Wrapper ronderëm .row
mat der .overflow-hidden
Klass:
<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 a vertikal Rennen
.g-*
Klassen kënne benotzt ginn fir d'horizontale Rennbreeden ze kontrolléieren, fir dat folgend Beispill benotze mir eng méi kleng Rennbreet, sou datt et net néideg ass d' .overflow-hidden
Wrapperklass ze addéieren.
<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>
Rei Sailen Rennen
Gutter Klassen kënnen och an Zeilenkolonnen bäigefüügt ginn . Am folgende Beispill benotze mir reaktiounsfäeger Zeilekolonnen a reaktiounsfäeger Gutterklassen.
<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>
Keng Rennen
D'Rennen tëscht de Sailen an eise virdefinéierte Gitterklassen kënne mat ewechgeholl ginn .g-0
. Dëst läscht déi negativ margin
s aus .row
an der horizontal padding
aus all direkt Kanner Kolonnen.
Braucht Dir e Rand-zu-Rand Design? Drop den Elterendeel .container
oder .container-fluid
.
An der Praxis, hei ass wéi et ausgesäit. Notéiert Dir kënnt weider dëst mat all anere virdefinéierte Gitterklassen benotzen (inklusiv Kolonnbreeten, reaktiounsfäeger Niveauen, Neibestellungen a méi).
<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>
Änneren d'Rennen
Klassen sinn aus der $gutters
Sass Kaart gebaut déi vun der Sass Kaart ierflecher ass $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);