Notekcaurules

Notekcaurules ir polsterējums starp kolonnām, ko izmanto, lai Bootstrap režģa sistēmā reaģētu un pielāgotu saturu.

Šajā lapā

Kā viņi strādā

Notekcaurules ir atstarpes starp kolonnu saturu, ko rada horizontālā padding. Mēs iestatām padding-rightun padding-leftkatrā kolonnā, un izmantojam negatīvu margin, lai to kompensētu katras rindas sākumā un beigās, lai līdzinātu saturu.
Notekcaurules sākas 1.5rem( 24px) platumā. Tas ļauj mums saskaņot mūsu režģi ar polsterējuma un piemaļu starpliku skalu.
Notekcaurules var atbilstoši regulēt. Izmantojiet pārtraukuma punktam specifiskas noteku klases, lai modificētu horizontālās, vertikālās notekas un visas notekcaurules.

Horizontālās notekcaurules

.gx-*klases var izmantot, lai kontrolētu horizontālo noteku platumu. Ja tiek izmantotas .containerarī .container-fluidlielākas notekcaurules, lai izvairītos no nevēlamas pārplūdes, iespējams, būs jāpielāgo pamatne, izmantojot atbilstošu polsterējuma utilītu. Piemēram, šajā piemērā mēs esam palielinājuši polsterējumu ar .px-4:

Pielāgots kolonnu polsterējums

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>

Alternatīvs risinājums ir pievienot iesaiņojumu ap .rowar .overflow-hiddenklasi:

Pielāgots kolonnu polsterējums

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>

Vertikālās notekcaurules

.gy-*klases var izmantot, lai kontrolētu vertikālo noteku platumu rindā, kad kolonnas tiek apvilktas ar jaunām līnijām. Tāpat kā horizontālās notekcaurules, arī vertikālās notekcaurules var izraisīt pārplūdi zem .rowlapas beigās esošās. Ja tā notiek, .rowkopā ar .overflow-hiddenklasi pievienojiet iesaiņojumu:

Pielāgots kolonnu polsterējums

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>

Horizontālās un vertikālās notekas

.g-*klases var izmantot, lai kontrolētu horizontālo noteku platumu, nākamajā piemērā mēs izmantojam mazāku notekas platumu, tāpēc nebūs jāpievieno .overflow-hiddenaptinuma klase.

Pielāgots kolonnu polsterējums

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>

Rindu kolonnas notekas

Notekcaurules klases var pievienot arī rindu kolonnām . Nākamajā piemērā mēs izmantojam adaptīvās rindu kolonnas un adaptīvās noteku klases.

Rindas kolonna

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>

Nav notekcaurules

Notekcaurules starp kolonnām mūsu iepriekš definētajās režģa klasēs var noņemt, izmantojot .g-0. Tādējādi tiek noņemti negatīvie margins no visām tiešajām atvasinātajām kolonnām .rowun horizontālie elementi.padding

Nepieciešams dizains no malas līdz malai? Nometiet vecāku .containervai .container-fluidun pievienojiet .mx-0tam, .rowlai novērstu pārplūdi.

Praksē tas izskatās šādi. Ņemiet vērā, ka varat turpināt to izmantot ar visām pārējām iepriekš definētajām režģa klasēm (tostarp kolonnu platumiem, adaptīviem līmeņiem, pārkārtojumiem un citiem).

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

Mainiet notekcaurules

Klases ir veidotas no $guttersSass kartes, kas ir mantota no $spacersSass kartes.

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