Հեղեղատարներ
Հեղեղատարները ձեր սյուների միջև եղած միջադիրներն են, որոնք օգտագործվում են 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
. Սա հեռացնում է բացասական margin
s-ը .row
և հորիզոնականը padding
բոլոր անմիջական երեխաների սյունակներից:
Պե՞տք է եզրից ծայր դիզայն: Թողեք ծնողին .container
կամ .container-fluid
.
Գործնականում ահա թե ինչպես է այն նայում. Նկատի ունեցեք, որ դուք կարող եք շարունակել օգտագործել սա բոլոր մյուս կանխորոշված ցանցային դասերի հետ (ներառյալ սյունակների լայնությունները, արձագանքող մակարդակները, վերադասավորումները և այլն):
<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>
Փոխեք ջրհեղեղները
Դասերը կառուցված են $gutters
Sass քարտեզից, որը ժառանգվել է $spacers
Sass քարտեզից:
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);