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.

I tenei wharangi

Pehea ta ratou mahi

Ko nga awaawa nga aputa i waenga i nga ihirangi pou, i hangaia e te whakapae padding. Ka whakatauhia padding-righte matou padding-leftki ia pou, ka whakamahi i te kino marginki 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 .containerpea .container-fluidte 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:

Padding tīwae ritenga

html

<div class="container px-4 text-center">
  <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 .rowi te .overflow-hiddenakomanga:

Padding tīwae ritenga

html

<div class="container overflow-hidden text-center">
  <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 ki te whakahaere i nga whanui awaawa poutū i roto i te rarangi ka takai nga pou ki nga raina hou. Pērā i ngā awaawa whakapae, ka taea e nga awaawa poutū te waipuke i raro .rowi te pito o te wharangi. Mena ka puta tenei, ka taapirihia e koe he takai .rowme te .overflow-hiddenkaraehe:

Padding tīwae ritenga

html

<div class="container overflow-hidden text-center">
  <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 whakamahia e matou te whanui o te awaawa iti, no reira karekau he hiahia ki te taapiri i te .overflow-hiddenkaraehe takai.

Padding tīwae ritenga

html

<div class="container text-center">
  <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 rarangi haupae . I roto i te tauira e whai ake nei, ka whakamahia e matou nga pou haupae urupare me nga karaehe waikeri urupare.

Tīwae haupae

html

<div class="container text-center">
  <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 margins kino .rowme te whakapae paddingmai i nga pou tamariki tata katoa.

Kei te hiahia hoahoa taha-ki-te-taha? Whakatakahia te matua .containerme .container-fluidte taapiri atu ranei .mx-0ki te .rowhei aukati i te waipuke.

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

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

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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 $guttersmapi Sass i tuku iho mai i te $spacersmapi Sass.

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