gáitéir
Is éard is gáitéir ann ná an stuáil idir do cholúin, a úsáidtear chun spásáil agus ailíniú a dhéanamh ar ábhar i gcóras eangaí Bootstrap.
Conas a oibríonn siad
-
Is iad gáitéir na bearnaí idir ábhar an cholúin, cruthaithe ag cothrománach
padding
. Socraímidpadding-right
aguspadding-left
ar gach colún, agus úsáidimid diúltachmargin
chun é sin a fhritháireamh ag tús agus deireadh gach sraithe chun ábhar a ailíniú. -
Tosaíonn gáitéir ag
1.5rem
(24px
) ar leithead. Ligeann sé seo dúinn ár n-eangach a mheaitseáil leis an scála stuála agus spásálaithe corrlaigh . -
Is féidir gáitéir a choigeartú go freagrach. Bain úsáid as ranganna gáitéir a bhaineann go sonrach le brisphointe chun gáitéir chothrománacha, gáitéir ingearacha agus gach gáitéir a mhodhnú.
Gutters cothrománacha
.gx-*
is féidir ranganna a úsáid chun leithead an gháitéir chothrománaigh a rialú. D' fhéadfadh go mbeadh gá an tuismitheoir .container
nó an .container-fluid
tuismitheoir a choigeartú má úsáidtear gáitéir níos mó freisin chun ró-shreabhadh nach dteastaíonn a sheachaint, ag baint úsáide as fóntais stuála meaitseála. Mar shampla, sa sampla seo a leanas tá an stuáil méadaithe againn le .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>
Réiteach eile is ea fillteán a chur .row
leis an .overflow-hidden
rang:
<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 ingearach
.gy-*
is féidir ranganna a úsáid chun leithead an gháitéir ingearacha a rialú. Cosúil leis na gáitéir chothrománacha, is féidir leis na gáitéir ingearacha a bheith ina gcúis le roinnt ró-shreabhadh faoi bhun an .row
leathanaigh ag deireadh an leathanaigh. Má tharlaíonn sé seo, cuireann tú fillteán .row
leis an .overflow-hidden
rang:
<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 cothrománacha & ingearach
.g-*
is féidir ranganna a úsáid chun leithead gutter cothrománach a rialú, mar shampla seo a leanas úsáidimid leithead gutter níos lú, mar sin ní bheidh gá leis an .overflow-hidden
rang fillteáin a chur leis.
<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 colúin as a chéile
Is féidir ranganna gáitéir a chur le colúin rónna freisin . Sa sampla seo a leanas, úsáidimid colúin ró-fhreagrúla agus ranganna gutter sofhreagracha.
<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>
Gan gáitéir
Is féidir na gáitéir idir na colúin inár ranganna greille réamhshainithe a bhaint le .g-0
. Baineann sé seo na margin
s diúltacha as .row
agus an cothrománach padding
ó gach neascholún leanaí.
An riachtanas is gá dearadh imeall-go-imeall? Buail an tuismitheoir .container
nó .container-fluid
.
Go praiticiúil, seo conas tá sé. Tabhair faoi deara gur féidir leat leanúint ar aghaidh ag baint úsáide as seo le gach rang greille réamhshainithe eile (lena n-áirítear leithid colúin, sraitheanna freagrúla, athorduithe, agus níos mó).
<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>
Athraigh na gáitéir
Tógtar na ranganna ó $gutters
léarscáil Sass a fuarthas le hoidhreacht ó $spacers
léarscáil Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);