Canali
Il-kanali huma l-ikkuttunar bejn il-kolonni tiegħek, użati biex jispazjaw u jallinjaw il-kontenut b'mod reattiv fis-sistema tal-grilja Bootstrap.
Kif jaħdmu
-
Il-kanali huma l-lakuni bejn il-kontenut tal-kolonna, maħluqa minn orizzontali
padding
. Aħna nissettjawpadding-right
upadding-left
fuq kull kolonna, u nużaw negattivimargin
biex nikkumpensaw dak fil-bidu u fit-tmiem ta 'kull ringiela biex tallinja l-kontenut. -
Il-kanali jibdew minn
1.5rem
(24px
) wiesgħa. Dan jippermettilna nqabblu l-grilja tagħna mal-iskala tal- padding u l-ispazjar tal-marġni . -
Il-kanali jistgħu jiġu aġġustati b'mod reattiv. Uża klassijiet ta 'kanal speċifiċi għall-punt ta' waqfien biex timmodifika kanali orizzontali, kanali vertikali, u kanali kollha.
Canali orizzontali
.gx-*
klassijiet jistgħu jintużaw biex jikkontrollaw il-wisgħat orizzontali kanali. Il -ġenitur .container
jew .container-fluid
jista 'jeħtieġ li jiġi aġġustat jekk kanali akbar huma użati wkoll biex jiġi evitat overflow mhux mixtieq, bl-użu ta' utilità ta 'kuttunar tqabbil. Pereżempju, fl-eżempju li ġej aħna żidna l-ikkuttunar bi .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>
Soluzzjoni alternattiva hija li żżid tgeżwir madwar il .row
- .overflow-hidden
klassi:
<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>
Canali vertikali
.gy-*
klassijiet jistgħu jintużaw biex jikkontrollaw il-wisgħat tal-kanal vertikali. Bħall-kanali orizzontali, il-kanali vertikali jistgħu jikkawżaw xi overflow taħt il- .row
fl-aħħar ta 'paġna. Jekk iseħħ dan, żid tgeżwir .row
mal- .overflow-hidden
klassi:
<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>
Canali orizzontali u vertikali
.g-*
klassijiet jistgħu jintużaw biex jikkontrollaw il-wisa 'kanal orizzontali, għall-eżempju li ġej nużaw wisa' iżgħar tal-kanal, għalhekk mhux se jkun hemm bżonn li żżid il- .overflow-hidden
klassi tat-tgeżwir.
<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>
Filiela kolonni kanali
Il-klassijiet tal-kanal jistgħu jiġu miżjuda wkoll mal -kolonni tar-ringiela . Fl-eżempju li ġej, nużaw kolonni ta 'ringieli li jirrispondu u klassijiet ta' kanali li jirrispondu.
<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>
Ebda kanali
Il-kanali bejn il-kolonni fil-klassijiet tal-grilja predefiniti tagħna jistgħu jitneħħew b' .g-0
. Dan ineħħi l-i negattivi margin
minn .row
u l-orizzontali padding
mill-kolonni tat-tfal immedjati kollha.
Għandek bżonn disinn minn tarf għal tarf? Waqqa 'l-ġenitur .container
jew .container-fluid
.
Fil-prattika, hawn kif tidher. Innota li tista 'tkompli tuża dan mal-klassijiet l-oħra kollha tal-grilja predefiniti (inklużi wisa' tal-kolonni, livelli li jirrispondu, ordnijiet mill-ġdid, u aktar).
<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>
Ibdel il-kanali
Il-klassijiet jinbnew mill- $gutters
mappa Sass li tintiret mill- $spacers
mappa Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);