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.

Ar an leathanach seo

Conas a oibríonn siad

Is iad gáitéir na bearnaí idir ábhar an cholúin, cruthaithe ag cothrománach padding. Socraímid padding-rightagus padding-leftar gach colún, agus úsáidimid diúltach marginchun é 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 .containernó an .container-fluidtuismitheoir 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:

Stuála colún saincheaptha

<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 .rowleis an .overflow-hiddenrang:

Stuála colún saincheaptha

<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 .rowleathanaigh ag deireadh an leathanaigh. Má tharlaíonn sé seo, cuireann tú fillteán .rowleis an .overflow-hiddenrang:

Stuála colún saincheaptha

<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-hiddenrang fillteáin a chur leis.

Stuála colún saincheaptha

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

Colún as a chéile

<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 margins diúltacha as .rowagus an cothrománach paddingó gach neascholún leanaí.

An riachtanas is gá dearadh imeall-go-imeall? Buail an tuismitheoir .containernó .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ó).

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

Athraigh na gáitéir

Tógtar na ranganna ó $guttersléarscáil Sass a fuarthas le hoidhreacht ó $spacerslé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,
);