ʻ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.

Ma kēia ʻaoʻao

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ākou padding-righta padding-leftma kēlā me kēia kolamu, a hoʻohana i ka maikaʻi margine 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-fluidka 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:

Padding kolamu maʻamau

<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 .rowka .overflow-hiddenpapa:

Padding kolamu maʻamau

<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 .rowka hope o kahi ʻaoʻao. Inā loaʻa kēia, hoʻohui ʻoe i kahi wīwī a puni .rowme ka .overflow-hiddenpapa:

Padding kolamu maʻamau

<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-hiddenpapa wīwī.

Padding kolamu maʻamau

<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.

kolamu lalani

<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ā margins maikaʻi ʻole mai .rowa me ka paepae paddingmai 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).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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 $gutterspalapala ʻāina Sass i hoʻoili ʻia mai ka $spacerspalapala Sass.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);