tatatra

Ny tatatra dia ny padding eo anelanelan'ny tsangananao, ampiasaina hamaliana ny habaka sy hampifanaraka ny votoaty ao amin'ny rafitra grid Bootstrap.

Amin'ity pejy ity

Ny fomba fiasan'izy ireo

Ny tatatra dia ny elanelana misy eo amin'ny votoatin'ny tsanganana, noforonin'ny marindrano padding. Mametraka padding-rightsy padding-lefteo amin'ny tsanganana tsirairay isika, ary mampiasa lafy marginratsin'ny fanonerana izany eo am-piandohana sy faran'ny andalana tsirairay mba hampifanaraka ny atiny.
Manomboka amin'ny 1.5rem( 24px) malalaka ny tatatra. Izany dia ahafahantsika mampifanaraka ny grid-tsika amin'ny mari-pamantarana padding sy margin spacers .
Ny tatatra dia azo amboarina tsara. Mampiasà kilasy fahatapahana manokana hanovana ny tatatra marindrano, ny tatatra mitsangana ary ny tatatra rehetra.

Tany marindrano

.gx-*Ny kilasy dia azo ampiasaina hifehezana ny sakan'ny tatatra marindrano. Ny .containerna ny .container-fluidray aman-dreny dia mety mila amboarina raha ampiasaina koa ny tatatra lehibe kokoa mba hisorohana ny fihoaram-pefy tsy ilaina, amin'ny fampiasana fitaovana padding mifanentana. Ohatra, amin'ity ohatra manaraka ity dia nampitombo ny padding izahay .px-4:

Padding tsanganana manokana

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>

Vahaolana hafa dia ny manampy fonosana manodidina .rowny .overflow-hiddenkilasy:

Padding tsanganana manokana

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>

tatatra mitsangana

.gy-*Ny kilasy dia azo ampiasaina hifehezana ny sakan'ny tatatra mitsangana ao anatin'ny andalana rehefa mifono tsipika vaovao ny tsanganana. Tahaka ireo tatatra marindrano, ireo tatatra mitsangana dia mety hiteraka fihoaram-pefy eo ambanin'ny .rowfaran'ny pejy iray. Raha mitranga izany, dia ampidirinao manodidina .rowny .overflow-hiddenkilasy:

Padding tsanganana manokana

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>

Tany marindrano sy mitsangana

.g-*Ny kilasy dia azo ampiasaina hifehezana ny sakan'ny tatatra marindrano, ho an'ity ohatra manaraka ity dia mampiasa sakan'ny tatatra kely kokoa isika, noho izany dia tsy ilaina ny manampy ny .overflow-hiddenkilasy wrapper.

Padding tsanganana manokana

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>

Ny tsanganana andalana dia tatatra

Azo ampiana amin'ny tsanganana andalana ihany koa ny kilasy tatatra . Amin'ity ohatra manaraka ity dia mampiasa tsanganana andalana mamaly sy kilasy tatatra mamaly izahay.

Tsanganana andalana

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>

Tsy misy tatatra

Azo esorina miaraka amin'ny .g-0. Izany dia manala ny ratsy sy marginny .rowmarindrano paddingamin'ny tsanganana ankizy rehetra.

Mila endrika mitongilana? Atsaharo ny ray aman-dreny .containerna .container-fluidary ampio .mx-0ny .rowmba hisorohana ny fihoaram-pefy.

Amin'ny fampiharana, toy izao ny endriny. Mariho fa azonao atao ny manohy mampiasa an'io miaraka amin'ireo kilasin'ny grid hafa efa voafaritra mialoha (anisan'izany ny sakan'ny tsanganana, ny ambaratongam-pandrenesana, ny fanavaozana, ary ny maro hafa).

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

Hanova ny tatatra

Ny kilasy dia natsangana avy amin'ny $gutterssarintany Sass izay nolovaina tamin'ny $spacerssarintany Sass.

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