Հեղեղատարներ

Հեղեղատարները ձեր սյուների միջև եղած միջադիրներն են, որոնք օգտագործվում են Bootstrap ցանցային համակարգում բովանդակությունը արձագանքելու և համապատասխանեցնելու համար:

Այս էջում

Ինչպես են նրանք աշխատում

Հեղեղատարները սյունակների բովանդակության միջև եղած բացերն են, որոնք ստեղծվել են հորիզոնական padding. Մենք սահմանում ենք padding-rightև padding-leftյուրաքանչյուր սյունակի վրա, և օգտագործում ենք բացասական margin՝ յուրաքանչյուր տողի սկզբում և վերջում փոխհատուցելու համար՝ բովանդակությունը հավասարեցնելու համար:
Հեղեղատարները սկսվում են 1.5rem( 24px) լայնությունից: Սա թույլ է տալիս մեզ համապատասխանեցնել մեր ցանցը լցոնման և լուսանցքի միջակայքերի սանդղակի հետ:
Հեղեղատարները կարող են արձագանքող կերպով կարգավորվել: Հորիզոնական ջրհեղեղները, ուղղահայաց ջրհեղեղները և բոլոր ջրհեղեղները փոփոխելու համար օգտագործեք բեկման կետի հատուկ դասեր:

Հորիզոնական ջրհեղեղներ

.gx-*դասերը կարող են օգտագործվել հորիզոնական ջրհորների լայնությունը վերահսկելու համար: Հնարավոր է, .containerոր .container-fluidծնողը կարգավորվի, եթե օգտագործվում են նաև ավելի մեծ ջրհեղեղներ՝ անցանկալի արտահոսքից խուսափելու համար՝ օգտագործելով համապատասխան լցոնման սարք: Օրինակ, հետևյալ օրինակում մենք ավելացրել ենք լցոնումը հետևյալով .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>

Այլընտրանքային լուծում է դասի շուրջ փաթաթան .rowավելացնելը .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>

Ուղղահայաց հեղեղատարներ

.gy-*դասերը կարող են օգտագործվել ուղղահայաց ջրհորների լայնությունները վերահսկելու համար: Հորիզոնական ջրհեղեղների պես, ուղղահայաց ջրհեղեղները կարող են առաջացնել որոշակի արտահոսք .rowէջի վերջում ներքևում: Եթե դա տեղի ունենա, դուք ավելացնում եք փաթաթան դասի .rowհետ ՝.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>

Հորիզոնական և ուղղահայաց ջրհեղեղներ

.g-*Դասերը կարող են օգտագործվել հորիզոնական ջրհորների լայնությունները վերահսկելու համար, հետևյալ օրինակի համար մենք օգտագործում ենք ավելի փոքր ջրհոր լայնություն, ուստի անհրաժեշտություն չի լինի ավելացնել .overflow-hiddenփաթաթման դասը:

Պատվերով սյունակի լցոնում

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

Շարքի սյուների ջրհեղեղներ

Հեղեղաջրերի դասերը կարող են նաև ավելացվել տողերի սյունակներում : Հետևյալ օրինակում մենք օգտագործում ենք արձագանքող տողերի սյունակներ և արձագանքող ջրահեռացման դասեր:

Տող սյունակ

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

Առանց ջրհորների

Մեր նախապես սահմանված ցանցային դասերի սյունակների միջև ջրհեղեղները կարող են հեռացվել .g-0. Սա հեռացնում է բացասական margins-ը .rowև հորիզոնականը paddingբոլոր անմիջական երեխաների սյունակներից:

Պե՞տք է եզրից ծայր դիզայն: Թողեք ծնողին .containerկամ .container-fluid.

Գործնականում ահա թե ինչպես է այն նայում. Նկատի ունեցեք, որ դուք կարող եք շարունակել օգտագործել սա բոլոր մյուս կանխորոշված ցանցային դասերի հետ (ներառյալ սյունակների լայնությունները, արձագանքող մակարդակները, վերադասավորումները և այլն):

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

Փոխեք ջրհեղեղները

Դասերը կառուցված են $guttersSass քարտեզից, որը ժառանգվել է $spacersSass քարտեզից:

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