Ulluqe
Ulluqet janë mbushja midis kolonave tuaja, të përdorura për të vendosur hapësirën dhe përafrimin e përmbajtjes në mënyrë të përgjegjshme në sistemin e rrjetit Bootstrap.
Si funksionojnë
-
Ulluqet janë boshllëqet midis përmbajtjes së kolonës, të krijuara nga horizontale
padding
. Ne vendosimpadding-right
dhepadding-left
në secilën kolonë dhe përdorim negativmargin
për të kompensuar atë në fillim dhe në fund të çdo rreshti për të lidhur përmbajtjen. -
Ulluqet fillojnë në
1.5rem
(24px
) të gjerë. Kjo na lejon të përputhemi me rrjetin tonë me shkallën e mbushjes dhe ndarjes së kufirit . -
Ulluqet mund të rregullohen në mënyrë të përgjegjshme. Përdorni klasa të ulluqeve specifike për pikën e ndërprerjes për të modifikuar ulluqet horizontale, ulluqet vertikale dhe të gjitha ulluqet.
Ulluqe horizontale
.gx-*
klasat mund të përdoren për të kontrolluar gjerësinë horizontale të ulluqeve. Prindi .container
ose .container-fluid
prindi mund të kenë nevojë të rregullohen nëse përdoren gjithashtu ulluqe më të mëdha për të shmangur tejmbushjen e padëshiruar, duke përdorur një mjet të përshtatshëm mbushjeje. Për shembull, në shembullin e mëposhtëm ne kemi rritur mbushjen me .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>
Një zgjidhje alternative është të shtoni një mbështjellës rreth .row
klasës .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>
Ulluqe vertikale
.gy-*
klasat mund të përdoren për të kontrolluar gjerësinë vertikale të ulluqeve. Ashtu si ulluqet horizontale, ulluqet vertikale mund të shkaktojnë një tejmbushje poshtë ulluqeve .row
në fund të faqes. Nëse kjo ndodh, ju shtoni një mbështjellës .row
me .overflow-hidden
klasën:
<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>
Ulluqe horizontale dhe vertikale
.g-*
klasat mund të përdoren për të kontrolluar gjerësinë e ulluqeve horizontale, për shembullin e mëposhtëm ne përdorim një gjerësi më të vogël të ulluqit, kështu që nuk do të ketë nevojë të shtojmë .overflow-hidden
klasën e mbështjellësit.
<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>
Kolonat e rreshtave ulluqe
Klasat e ulluqeve gjithashtu mund të shtohen në kolonat e rreshtave . Në shembullin e mëposhtëm, ne përdorim kolona rreshtash të përgjegjshme dhe klasa ulluqe reaguese.
<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>
Nuk ka ulluqe
Ulluqet midis kolonave në klasat tona të paracaktuara të rrjetit mund të hiqen me .g-0
. Kjo heq margin
s negative nga .row
dhe horizontale padding
nga të gjitha kolonat e fëmijëve të afërt.
Keni nevojë për një dizajn nga skaji në skaj? Hiq prindin .container
ose .container-fluid
.
Në praktikë, ja se si duket. Vini re se mund të vazhdoni ta përdorni këtë me të gjitha klasat e tjera të paracaktuara të rrjetit (përfshirë gjerësinë e kolonave, nivelet e përgjegjshme, rirenditjet dhe më shumë).
<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>
Ndryshoni ulluqet
Klasat ndërtohen nga $gutters
harta Sass e cila është trashëguar nga $spacers
harta Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);