Nga awaawa
Ko nga awaawa te papaa i waenga i o poupou, e whakamahia ana ki te aro ki te mokowā me te whakahāngai ihirangi i roto i te punaha mātiti Bootstrap.
Pehea ta ratou mahi
-
Ko nga awaawa nga aputa i waenga i nga ihirangi pou, i hangaia e te whakapae
padding
. Ka whakatauhiapadding-right
e matoupadding-left
ki ia pou, ka whakamahi i te kinomargin
ki te whakatiki i tera i te timatanga me te mutunga o ia rarangi hei whakatika i nga ihirangi. -
Ka timata nga awaawa ki te
1.5rem
(24px
) whanui. Ma tenei ka taea e taatau te whakarite i to maatau matiti ki te tauine papaa me te tauine mokowhiti tawhē . -
Ka taea te whakatika i nga awaawa. Whakamahia nga karaehe pakaruhanga-motuhake ki te whakarereke i nga awaawa whakapae, nga awaawa poutū, me nga awaawa katoa.
Nga awaawa whakapae
.gx-*
Ka taea te whakamahi i nga karaehe ki te whakahaere i nga whanui o te awaawa whakapae. Me whakatikatika .container
pea .container-fluid
te matua, te matua ranei mena ka whakamahia nga awaawa nunui hei karo i te puhaketanga, ma te whakamahi i tetahi taputapu papaa e rite ana. Hei tauira, i roto i te tauira e whai ake nei kua whakanuia e matou te padding ki .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>
Ko tetahi atu otinga ko te taapiri i tetahi takai huri noa .row
i te .overflow-hidden
akomanga:
<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>
Nga awaawa poutū
.gy-*
Ka taea te whakamahi i nga karaehe hei whakahaere i te whanui o te awaawa poutū. Pērā i ngā awaawa whakapae, ka taea e nga awaawa poutū te waipuke i raro .row
i te pito o te wharangi. Mena ka puta tenei, ka taapirihia e koe he takai .row
me te .overflow-hidden
karaehe:
<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>
Ko nga awaawa whakapae me te poutū
.g-*
Ka taea te whakamahi i nga karaehe ki te whakahaere i nga whanui o te awaawa whakapae, mo te tauira e whai ake nei ka whakamahi matou i te whanui o te awaawa iti, no reira karekau he hiahia ki te taapiri i te .overflow-hidden
akomanga takai.
<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>
He awaawa nga pou rarangi
Ka taea hoki te taapiri i nga karaehe awaawa ki nga pou haupae . I roto i te tauira e whai ake nei, ka whakamahia e matou nga pou haupae urupare me nga karaehe waikeri urupare.
<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>
Karekau he awaawa
Ka taea te tango i nga awaawa i waenga i nga pou i roto i a maatau karaehe matiti kua tohua me te .g-0
. Ka tangohia e tenei nga margin
s kino .row
me te whakapae padding
mai i nga pou tamariki tata katoa.
Kei te hiahia hoahoa taha-ki-te-taha? Whakataka te matua .container
ranei .container-fluid
.
I roto i nga mahi, koinei te ahua. Kia mahara ka taea tonu e koe te whakamahi i tenei me etahi atu karaehe matiti kua tautuhia-mua (tae atu ki nga whanui o nga pou, nga taumata whakautu, nga raupapatanga, me etahi atu).
<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>
Hurihia nga awaawa
Ka hangaia nga karaehe mai i te $gutters
mapi Sass i tuku iho mai i te $spacers
mapi Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);