Lithako

Li-Gutters ke sebaka se pakeng tsa litšiea tsa hau, se sebelisetsoang ho beha sebaka ka mokhoa o arabelang le ho hokahanya litaba ka har'a grid ea Bootstrap.

Leqepheng lena

Kamoo li sebetsang kateng

Li-gutters ke likheo pakeng tsa litaba tsa kholomo, tse entsoeng ke tse rapameng padding. Re beha padding-rightle padding-leftkholumong ka 'ngoe, 'me re sebelisa negative marginho fokotsa seo qalong le qetellong ea mola o mong le o mong ho hokahanya litaba.
Li-gutter li qala ho 1.5rem( 24px) bophara. Sena se re lumella ho bapisa gridi ea rona le sekala sa padding le margin spacers .
Li-gutters li ka fetoloa ka mokhoa o nepahetseng. Sebelisa litlelase tse ikhethileng tsa li-gutter ho fetola li-gutter tse tšekaletseng, li-gutter tse otlolohileng, le li-gutter kaofela.

Li-gutter tse tšekaletseng

.gx-*lihlopha li ka sebelisoa ho laola bophara ba li-gutter tse rapameng. Ho ka 'na ha hlokahala hore motsoali .containerkapa .container-fluidmotsoali a lokisoe haeba li-gutters tse khōloanyane le tsona li sebelisoa ho qoba ho phalla ho sa batleheng, ho sebelisa lisebelisoa tse tšoanang. Mohlala, mohlaleng o latelang re ekelitse padding ka .px-4:

Melaetsa e tloahelehileng

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>

Tharollo e 'ngoe ke ho kenyelletsa wrapper ho potoloha .rowle .overflow-hiddensehlopha:

Melaetsa e tloahelehileng

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>

Li-gutter tse otlolohileng

.gy-*litlelase li ka sebelisoa ho laola bophara ba li-gutter tse otlolohileng ka har'a tatellano ha litšiea li phuthela meleng e mecha. Joalo ka li-gutter tse tšekaletseng, li-gutters tse emeng li ka baka ho tlala ka tlase .rowho qetellong ea leqephe. Haeba sena se etsahala, o eketsa sekoahelo ho pota-pota .rowle .overflow-hiddensehlopha:

Melaetsa e tloahelehileng

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>

Li-gutter tse tšekaletseng le tse theohileng

.g-*litlelase li ka sebelisoa ho laola bophara ba li-gutter tse tšekaletseng, mohlala o latelang re sebelisa bophara bo bonyenyane ba li-gutter, kahoo ho ke ke ha hlokahala ho eketsa sehlopha sa .overflow-hiddenwrapper.

Melaetsa e tloahelehileng

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>

Mela ea litšiea li-gutters

Litlelase tsa Gutter le tsona li ka eketsoa likholomong tsa mela . Mohlaleng o latelang, re sebelisa litšiea tsa mela e arabelang le lihlopha tse arabelang tsa li-gutter.

Kholomo ea mola

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>

Ha ho li-gutters

Li-gutters tse pakeng tsa litšiea lihlopheng tsa rona tse hlalositsoeng esale pele li ka tlosoa ka .g-0. Sena se tlosa negative margins ho tloha .rowle tse rapameng paddingho tloha likholomong tsohle tse haufi tsa bana.

Na u hloka moralo o mong le o mong? Lahla motsoali .containerkapa .container-fluidu eketse .mx-0ho .rowho thibela ho tlala.

Ka ts'ebetso, mona ke kamoo e shebahalang kateng. Hlokomela hore o ka tsoela pele ho sebelisa sena ka litlelase tse ling tsohle tse boletsoeng esale pele (ho kenyeletsoa bophara ba kholomo, likarolo tse arabelang, li-odara, le tse ling).

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

Fetola li-gutters

Litlelase li hahiloe ho tsoa $gutters'mapeng oa Sass o futsitsoeng ho tsoa ho $spacers' mapa oa Sass.

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