cutairean

Is e cutairean am pleadhag eadar na colbhan agad, air an cleachdadh gus susbaint a shuidheachadh agus a cho-thaobhadh ann an siostam clèithe Bootstrap.

Air an duilleig seo

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:

Padding colbh gnàthaichte

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

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

Padding colbh gnàthaichte

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

Gutters dìreach

.gy-*faodar clasaichean a chleachdadh gus smachd a chumail air leud nan cutairean dìreach. 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:

Padding colbh gnàthaichte

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

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.

Padding colbh gnàthaichte

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

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.

Colbh sreath

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

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

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

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

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,
);