Vihmaveerennid

Vihmaveerennid on teie veergude vaheline polster, mida kasutatakse Bootstrapi ruudustikusüsteemis sisu reageerivaks eraldamiseks ja joondamiseks.

Sellel lehel

Kuidas nad töötavad

Vihmaveerennid on lüngad veeru sisu vahel, mille loob horisontaalne padding. Igas veerus määrame padding-rightja ning sisu joondamiseks kasutame selle kompenseerimiseks iga rea alguses ja lõpus negatiivset.padding-leftmargin
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, .containervõib .container-fluidosutuda vajalikuks kohandada vanemat, kasutades sobivat polsterdusutiliiti. Näiteks järgmises näites oleme suurendanud täidisega .px-4:

Kohandatud veeru polsterdus

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>

Alternatiivne lahendus on lisada klassiga ümber .rowümbris .overflow-hidden:

Kohandatud veeru polsterdus

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>

Vertikaalsed vihmaveerennid

.gy-*klasse saab kasutada vertikaalsete vihmaveerennide laiuste juhtimiseks reas, kui veerud muutuvad uuteks joonteks. Nagu horisontaalsed vihmaveerennid, võivad ka vertikaalsed vihmaveerennid põhjustada .rowlehe lõpus oleva ülevoolu. Kui see juhtub, lisate klassiga ümber .rowümbrise :.overflow-hidden

Kohandatud veeru polsterdus

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>

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-hiddenmähise klassi lisada.

Kohandatud veeru polsterdus

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>

Rida veerud vihmaveerennid

Reaveergudele saab lisada ka renni klasse . Järgmises näites kasutame tundliku rea veerge ja reageerivaid vihmaveetorude klasse.

Rea veerg

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>

Pole vihmaveetorusid

Meie eelmääratletud ruudustikuklasside veergude vahel olevad vihmaveerennid saab eemaldada nupuga .g-0. See eemaldab negatiivsed margins-d kõigist otsestest alamveergudest .rowja horisontaalsed .padding

Kas vajate servast servani disaini? Ülevoolu vältimiseks kukutage vanem .containervõi .container-fluidja lisage ..mx-0.row

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).

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

Vahetage vihmaveerennid

Klassid on koostatud $guttersSassi kaardist, mis on päritud $spacersSassi kaardilt.

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