cutairean

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’ suidheachadh padding-rightagus padding-leftair gach colbh, agus a’ cleachdadh àicheil margingus 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 .containerno am .container-fluidpà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 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>

Is e fuasgladh eile pasgan a chuir timcheall air a .row’ .overflow-hiddenchlas:

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

Gutters dìreach

.gy-*faodar clasaichean a chleachdadh gus smachd a chumail air leudan cutairean dìreach taobh a-staigh sreath nuair a bhios colbhan a’ cuairteachadh gu loidhnichean ùra. Coltach ris na cutairean còmhnard, faodaidh na cutairean dìreach beagan tar-shruth adhbhrachadh fon ìre .rowaig deireadh duilleag. Ma thachras seo, cuiridh tu pasgan timcheall .rowleis a’ .overflow-hiddenchlas:

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

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-hiddenchlas fillte a chur ris.

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

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

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 margins bho .rowagus 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 .containerno .container-fluidcuir .mx-0ris .rowgus casg a chuir air cus sruthadh.

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

Atharraich na cutairean

Tha clasaichean air an togail bho $guttersmhapa Sass a gheibhear bho mhapa $spacersSass.

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