cutairean
Is e cutairean am pleadhag eadar na colbhan agad, air an cleachdadh gus susbaint a shuidheachadh agus a cho-thaobhadh ann an siostam clèithe Bootstrap.
Mar a tha iad ag obair
-
Is e cutairean na beàrnan eadar susbaint colbh, air a chruthachadh le còmhnard
padding
. Bidh sinn a’ suidheachadhpadding-right
aguspadding-left
air gach colbh, agus a’ cleachdadh àicheilmargin
gus sin a chothromachadh aig toiseach is deireadh gach sreath gus susbaint a cho-thaobhadh. -
Bidh cutairean a’ tòiseachadh aig
1.5rem
(24px
) farsaing. Leigidh seo leinn ar cliath a mhaidseadh ri sgèile pleadhaig is iomaill . -
Faodar cutairean atharrachadh gu freagairteach. Cleachd clasaichean cutair sònraichte airson cutairean còmhnard, cutairean dìreach, agus a h-uile cutair atharrachadh.
Gutters còmhnard
.gx-*
faodar clasaichean a chleachdadh gus smachd a chumail air leud nan cutairean còmhnard. Dh ’ fhaodadh gum feumar am pàrant .container
no am .container-fluid
pàrant atharrachadh ma thèid cutairean nas motha a chleachdadh cuideachd gus tar-shruth gun iarraidh a sheachnadh, a’ cleachdadh goireas pleadhaig co-ionnan. Mar eisimpleir, san eisimpleir a leanas tha sinn air am pleadhag àrdachadh le .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>
Is e fuasgladh eile pasgan a chuir timcheall air a .row
’ .overflow-hidden
chlas:
<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>
Gutters dìreach
.gy-*
faodar clasaichean a chleachdadh gus smachd a chumail air leud nan cutairean dìreach. Coltach ris na cutairean còmhnard, faodaidh na cutairean dìreach beagan tar-shruth adhbhrachadh fon ìre .row
aig deireadh duilleag. Ma thachras seo, cuiridh tu pasgan timcheall .row
leis a’ .overflow-hidden
chlas:
<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>
Gutters còmhnard is inghearach
.g-*
faodar clasaichean a chleachdadh airson smachd a chumail air leud an cutair chòmhnard, mar an eisimpleir a leanas bidh sinn a’ cleachdadh leud cutair nas lugha, agus mar sin cha bhith feum air a’ .overflow-hidden
chlas fillte a chur ris.
<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>
Gutters colbhan sreath
Faodar clasaichean cutairean a chur ri colbhan sreath cuideachd . Anns an eisimpleir a leanas, bidh sinn a’ cleachdadh colbhan sreath freagairteach agus clasaichean cutairean freagairteach.
<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>
Gun cutairean
Faodar na cutairean eadar colbhan anns na clasaichean clèithe ro-mhìnichte againn a thoirt air falbh le .g-0
. Bidh seo a’ toirt air falbh na h-àicheil margin
s bho .row
agus a’ chòmhnard padding
às a h-uile colbh cloinne a tha faisg air làimh.
A bheil feum agad air dealbhadh iomall-gu-oir? Leig às am pàrant .container
no .container-fluid
.
Ann an cleachdadh, seo mar a tha e coltach. Thoir an aire gum faod thu leantainn air adhart a’ cleachdadh seo leis a h-uile clas clèithe ro-mhìnichte eile (a’ toirt a-steach leud colbhan, ìrean freagairteach, ath-òrdughan, agus barrachd).
<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>
Atharraich na cutairean
Tha clasaichean air an togail bho $gutters
mhapa Sass a gheibhear bho mhapa $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,
);