Rach gu prìomh shusbaint Air adhart gu seòladh docs
Check
in English

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.

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
Padding colbh gnàthaichte
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>

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

Padding colbh gnàthaichte
Padding colbh gnàthaichte
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>

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:

Padding colbh gnàthaichte
Padding colbh gnàthaichte
Padding colbh gnàthaichte
Padding colbh gnàthaichte
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>

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
Padding colbh gnàthaichte
Padding colbh gnàthaichte
Padding colbh gnàthaichte
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>

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

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

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

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