Defluiloj
Defluiloj estas la remburaĵo inter viaj kolumnoj, uzata por responde spacigi kaj vicigi enhavon en la kradsistemo Bootstrap.
Kiel ili funkcias
-
Defluiloj estas la interspacoj inter kolumnenhavo, kreitaj de horizontala
padding
. Ni starigaspadding-right
kajpadding-left
sur ĉiu kolumno, kaj uzas negativanmargin
por kompensi tion ĉe la komenco kaj fino de ĉiu vico por vicigi enhavon. -
Defluiloj komenciĝas je
1.5rem
(24px
) larĝe. Ĉi tio permesas al ni kongrui nian kradon al la skalo de remburaĵo kaj marĝeninterspacigoj . -
Defluiloj povas esti respondeme alĝustigitaj. Uzu romppunkto-specifajn defluilklasojn por modifi horizontalajn kanaletojn, vertikalajn kanaletojn, kaj ĉiujn defluojn.
Horizontala kanaloj
.gx-*
klasoj povas esti uzataj por kontroli la horizontalajn defluillarĝojn. La .container
aŭ .container-fluid
gepatro eble devos esti alĝustigita se ankaŭ pli grandaj defluiloj estas uzataj por eviti nedeziratan superfluon, uzante kongruan kompletigan ilon. Ekzemple, en la sekva ekzemplo ni pliigis la kompletigo per .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>
Alternativa solvo estas aldoni envolvaĵon ĉirkaŭ la .row
kun la .overflow-hidden
klaso:
<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>
Vertikalaj defluiloj
.gy-*
klasoj povas esti uzataj por kontroli la vertikalajn defluillarĝojn. Kiel la horizontalaj defluiloj, la vertikalaj defluiloj povas kaŭzi iom da superfluo sub la .row
ĉe la fino de paĝo. Se ĉi tio okazas, vi aldonas envolvaĵon ĉirkaŭe .row
kun la .overflow-hidden
klaso:
<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>
Horizontalaj kaj vertikalaj defluiloj
.g-*
klasoj povas esti uzataj por kontroli la horizontalajn defluillarĝojn, por la sekva ekzemplo ni uzas pli malgrandan defluillarĝon, do ne estos bezono aldoni la .overflow-hidden
envolvaĵklason.
<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>
Vico kolumnoj defluiloj
Gutter-klasoj ankaŭ povas esti aldonitaj al vicaj kolumnoj . En la sekva ekzemplo, ni uzas respondajn vickolumnojn kaj respondemajn defluklasojn.
<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>
Neniuj defluiloj
La defluiloj inter kolumnoj en niaj antaŭdifinitaj kradaj klasoj povas esti forigitaj per .g-0
. Ĉi tio forigas la negativajn margin
s de .row
kaj la horizontalon padding
de ĉiuj tujaj filaj kolumnoj.
Ĉu vi bezonas rando-al-randan dezajnon? Forigu la gepatron .container
aŭ .container-fluid
.
En la praktiko, jen kiel ĝi aspektas. Notu, ke vi povas daŭre uzi ĉi tion kun ĉiuj aliaj antaŭdifinitaj kradaj klasoj (inkluzive de kolumnlarĝoj, respondemaj niveloj, reordigoj kaj pli).
<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>
Ŝanĝu la kanalojn
Klasoj estas konstruitaj de la $gutters
Sass-mapo kiu estas heredita de la $spacers
Sass-mapo.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);