ʻAuwai
ʻO nā auwai ka padding ma waena o kāu mau kolamu, i hoʻohana ʻia no ka pane ʻana i ka lewa a hoʻolikelike i nā ʻike ma ka ʻōnaehana mākia Bootstrap.
Pehea lākou e hana ai
-
ʻO nā ʻauwai nā āwāwa ma waena o ka maʻiʻo kolamu, i hana ʻia e ka pae
padding
. Hoʻonoho mākoupadding-right
apadding-left
ma kēlā me kēia kolamu, a hoʻohana i ka maikaʻimargin
e hoʻopau i kēlā ma ka hoʻomaka a me ka hopena o kēlā me kēia lālani e hoʻolike i ka ʻike. -
Hoʻomaka nā ʻauwai ma
1.5rem
(24px
) ākea. Hāʻawi kēia iā mākou e hoʻohālikelike i kā mākou mānoanoa me ka padding a me margin spacers scale. -
Hiki ke hoʻoponopono ʻia nā auwai. E hoʻohana i nā papa ʻawaʻawa kikoʻī no ka hoʻololi ʻana i nā ʻauwai ākea, nā ʻauwai kūpaʻa, a me nā auwai a pau.
ʻAuwai kūpae
.gx-*
Hiki ke hoʻohana ʻia nā papa e hoʻomalu i ka laula o ka auwai. Pono e hoʻoponopono ʻia ka makua a i .container
ʻole .container-fluid
ka makua inā hoʻohana ʻia nā ʻauwai nui e pale aku i ke kahe nui ʻole, me ka hoʻohana ʻana i kahi pono padding pili. No ka laʻana, i kēia laʻana ua hoʻonui mākou i ka padding 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>
ʻO kahi hopena ʻē aʻe ʻo ka hoʻohui ʻana i kahi wīwī a puni .row
ka .overflow-hidden
papa:
<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>
ʻAuwai kū pololei
.gy-*
Hiki ke hoʻohana ʻia nā papa no ka hoʻomalu ʻana i ka laula o ka auwai kū. E like me nā ʻauwai ākea, hiki i nā ʻauwai kūpaʻa ke hoʻohūhū ma lalo o .row
ka hope o kahi ʻaoʻao. Inā loaʻa kēia, hoʻohui ʻoe i kahi wīwī a puni .row
me ka .overflow-hidden
papa:
<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>
ʻAuwai ʻākau a kū pololei
.g-*
Hiki ke ho'ohana 'ia nā papa no ka ho'omalu 'ana i ka laula o ka 'auwai, no ka la'ana ma lalo nei, ho'ohana mākou i ka laula'a 'a'ai li'ili'i, no laila 'a'ole pono e ho'ohui i ka .overflow-hidden
papa wīwī.
<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>
ʻAuwai nā kolamu lālani
Hiki ke hoʻohui ʻia nā papa ʻauwai i nā kolamu lālani . Ma kēia laʻana, hoʻohana mākou i nā kolamu lālani pane a me nā papa auwai pane.
<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>
ʻAʻohe auwai
Hiki ke hoʻoneʻe ʻia nā ʻauwaha ma waena o nā kolamu i kā mākou papa papa kuhikuhi mua me .g-0
. Hoʻopau kēia i nā margin
s maikaʻi ʻole mai .row
a me ka paepae padding
mai nā kolamu keiki āpau.
Pono i kahi hoʻolālā lihi-i-kaʻe? Hoʻokuʻu i ka makua a i .container
ʻole .container-fluid
.
Ma ka hana, eia ke ano. E hoʻomaopopo hiki iā ʻoe ke hoʻomau i ka hoʻohana ʻana i kēia me nā papa papa kuhikuhi ʻē aʻe (me ka laulā kolamu, nā pae pane, nā hoʻonohonoho hou, a me nā mea hou aku).
<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>
E hoʻololi i nā auwai
Kūkulu ʻia nā papa mai ka $gutters
palapala ʻāina Sass i hoʻoili ʻia mai ka $spacers
palapala Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);