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, var būt jāpielāgo pamatelements, 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

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

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

Pielāgots kolonnu polsterējums

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

Vertikālās notekcaurules

.gy-*klases var izmantot, lai kontrolētu vertikālo noteku platumu. 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

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

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

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

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

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

Nekādu notekcauruļu

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? Atlaidiet vecāku .containervai .container-fluid.

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

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

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,
);