Vihmaveerennid
Vihmaveerennid on teie veergude vaheline polster, mida kasutatakse Bootstrapi ruudustikusüsteemis sisu reageerivaks eraldamiseks ja joondamiseks.
Kuidas nad töötavad
-
Vihmaveerennid on lüngad veeru sisu vahel, mille loob horisontaalne
padding
. Igas veerus määramepadding-right
ja ning sisu joondamiseks kasutame selle kompenseerimiseks iga rea alguses ja lõpus negatiivset.padding-left
margin
-
Vihmaveerennid algavad
1.5rem
(24px
) laiusest. See võimaldab meil sobitada meie ruudustiku polsterduse ja veerise vahetükkide skaalaga. -
Vihmaveerennid saab reageerivalt reguleerida. Kasutage murdepunktispetsiifilisi rennide klasse horisontaalsete, vertikaalsete vihmaveerennide ja kõigi rennide muutmiseks.
Horisontaalsed vihmaveerennid
.gx-*
klasse saab kasutada horisontaalsete vihmaveerennide laiuste reguleerimiseks. Kui soovimatu ülevoolu vältimiseks kasutatakse ka suuremaid vihmaveerennid, .container
võib .container-fluid
osutuda vajalikuks kohandada vanemat, kasutades sobivat polsterdusutiliiti. Näiteks järgmises näites oleme suurendanud täidisega .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>
Alternatiivne lahendus on lisada klassiga ümber .row
ümbris .overflow-hidden
:
<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>
Vertikaalsed vihmaveerennid
.gy-*
klasse saab kasutada vertikaalsete vihmaveerennide laiuste reguleerimiseks. Nagu horisontaalsed vihmaveerennid, võivad ka vertikaalsed vihmaveerennid põhjustada .row
lehe lõpus oleva ülevoolu. Kui see juhtub, lisate klassiga ümber .row
ümbrise :.overflow-hidden
<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>
Horisontaalsed ja vertikaalsed vihmaveerennid
.g-*
klasse saab kasutada horisontaalsete vihmaveerennide laiuste reguleerimiseks, järgmise näite puhul kasutame väiksemat renni laiust, seega ei ole vaja .overflow-hidden
mähise klassi lisada.
<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>
Rida veerud vihmaveerennid
Reaveergudele saab lisada ka renni klasse . Järgmises näites kasutame tundliku rea veerge ja reageerivaid vihmaveetorude klasse.
<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>
Pole vihmaveetorusid
Meie eelmääratletud ruudustikuklasside veergude vahel olevad vihmaveerennid saab eemaldada nupuga .g-0
. See eemaldab negatiivsed margin
s-d kõigist otsestest alamveergudest .row
ja horisontaalsed .padding
Kas vajate servast servani disaini? Loobuge vanem .container
või .container-fluid
.
Praktikas näeb see välja nii. Pange tähele, et saate jätkata selle kasutamist kõigi teiste eelmääratletud ruudustikuklassidega (sh veergude laiused, reageerivad tasemed, ümberkorraldused ja palju muud).
<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>
Vahetage vihmaveerennid
Klassid on koostatud $gutters
Sassi kaardist, mis on päritud $spacers
Sassi kaardilt.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);