Gwteri

Gwteri yw'r padin rhwng eich colofnau, a ddefnyddir i ofod ac alinio cynnwys yn ymatebol yn system grid Bootstrap.

Ar y dudalen hon

Sut maen nhw'n gweithio

Gwteri yw'r bylchau rhwng cynnwys colofn, a grëir gan lorweddol padding. Rydym yn gosod padding-rightac padding-leftar bob colofn, ac yn defnyddio negatif margini wrthbwyso hynny ar ddechrau a diwedd pob rhes i alinio cynnwys.
Mae cwteri yn dechrau ar 1.5rem( 24px) led. Mae hyn yn ein galluogi i baru ein grid â'r raddfa padin a bylchau ymyl .
Gellir addasu cwteri yn ymatebol. Defnyddiwch ddosbarthiadau cwteri torbwynt-benodol i addasu cwteri llorweddol, cwteri fertigol, a'r holl gwteri.

Gwteri llorweddol

.gx-*gellir defnyddio dosbarthiadau i reoli lled y cwteri llorweddol. Efallai y bydd angen addasu'r rhiant .containerneu'r .container-fluidrhiant os defnyddir cwteri mwy hefyd i osgoi gorlifiad diangen, gan ddefnyddio cyfleustodau padin cyfatebol. Er enghraifft, yn yr enghraifft ganlynol rydym wedi cynyddu'r padin gyda .px-4:

Padin colofn personol

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

Ateb arall yw ychwanegu papur lapio o amgylch y .rowgyda'r .overflow-hiddendosbarth:

Padin colofn personol

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

Gwteri fertigol

.gy-*gellir defnyddio dosbarthiadau i reoli lled y gwter fertigol. Fel y cwteri llorweddol, gall y cwteri fertigol achosi rhywfaint o orlif o dan y cwteri .rowar ddiwedd tudalen. Os bydd hyn yn digwydd, rydych chi'n ychwanegu papur lapio o gwmpas .rowgyda'r .overflow-hiddendosbarth:

Padin colofn personol

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

Cafnau llorweddol a fertigol

.g-*gellir defnyddio dosbarthiadau i reoli lled y gwter llorweddol, ar gyfer yr enghraifft ganlynol rydym yn defnyddio lled gwter llai, felly ni fydd angen ychwanegu'r .overflow-hiddendosbarth lapio.

Padin colofn personol

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

Gwteri colofnau rhes

Gellir ychwanegu dosbarthiadau gwter at golofnau rhes hefyd . Yn yr enghraifft ganlynol, rydym yn defnyddio colofnau rhes ymatebol a dosbarthiadau gwteri ymatebol.

Colofn rhes

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

Dim cwteri

Gellir cael gwared ar y cwteri rhwng colofnau yn ein dosbarthiadau grid rhagosodedig gyda .g-0. Mae hyn yn tynnu'r negatif margins o'r holl golofnau plant uniongyrchol .rowa'r llorweddol ohonynt.padding

Angen dyluniad ymyl-i-ymyl? Gollwng y rhiant .containerneu .container-fluid.

Yn ymarferol, dyma sut mae'n edrych. Sylwch y gallwch chi barhau i ddefnyddio hwn gyda phob dosbarth grid wedi'i ddiffinio ymlaen llaw (gan gynnwys lled colofnau, haenau ymatebol, ail-archebion, a mwy).

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

Newidiwch y cwteri

Mae dosbarthiadau'n cael eu hadeiladu o $guttersfap Sass sy'n cael ei etifeddu o $spacersfap Sass.

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