Gwteri
Gwteri yw'r padin rhwng eich colofnau, a ddefnyddir i ofod ac alinio cynnwys yn ymatebol yn system grid Bootstrap.
Sut maen nhw'n gweithio
-
Gwteri yw'r bylchau rhwng cynnwys colofn, a grëir gan lorweddol
padding
. Rydym yn gosodpadding-right
acpadding-left
ar bob colofn, ac yn defnyddio negatifmargin
i 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 penodol i addasu cwteri llorweddol, cwteri fertigol, a phob cwter.
Gwteri llorweddol
.gx-*
gellir defnyddio dosbarthiadau i reoli lled y cwteri llorweddol. Efallai y bydd angen addasu'r rhiant .container
neu'r .container-fluid
rhiant 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
:
<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 .row
gyda'r .overflow-hidden
dosbarth:
<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 .row
ar ddiwedd tudalen. Os bydd hyn yn digwydd, rydych chi'n ychwanegu papur lapio o gwmpas .row
gyda'r .overflow-hidden
dosbarth:
<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-hidden
dosbarth lapio.
<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.
<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 rhagosodol gyda .g-0
. Mae hyn yn tynnu'r negatif margin
s o'r holl golofnau plant uniongyrchol .row
a'r llorweddol ohonynt.padding
Angen dyluniad ymyl-i-ymyl? Gollwng y rhiant .container
neu .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).
<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 $gutters
fap Sass sy'n cael ei etifeddu o $spacers
fap Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);