Defluiloj

Defluiloj estas la remburaĵo inter viaj kolumnoj, uzata por responde spacigi kaj vicigi enhavon en la kradsistemo Bootstrap.

Sur ĉi tiu paĝo

Kiel ili funkcias

Defluiloj estas la interspacoj inter kolumnenhavo, kreitaj de horizontala padding. Ni starigas padding-rightkaj padding-leftsur ĉiu kolumno, kaj uzas negativan marginpor 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 .containeraŭ .container-fluidgepatro 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:

Propra kolumna kompletigo

<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 .rowkun la .overflow-hiddenklaso:

Propra kolumna kompletigo

<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 .rowkun la .overflow-hiddenklaso:

Propra kolumna kompletigo

<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-hiddenenvolvaĵklason.

Propra kolumna kompletigo

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

Vico-kolumno

<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 margins de .rowkaj la horizontalon paddingde ĉiuj tujaj filaj kolumnoj.

Ĉu vi bezonas rando-al-randan dezajnon? Forigu la gepatron .containeraŭ .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).

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

.col-6 .col-md-4

<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 $guttersSass-mapo kiu estas heredita de la $spacersSass-mapo.

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