tatatra
Ny tatatra dia ny padding eo anelanelan'ny tsangananao, ampiasaina hamaliana ny habaka sy hampifanaraka ny votoaty ao amin'ny rafitra grid Bootstrap.
Ny fomba fiasan'izy ireo
-
Ny tatatra dia ny elanelana misy eo amin'ny votoatin'ny tsanganana, noforonin'ny marindrano
padding
. Mametrakapadding-right
sypadding-left
eo amin'ny tsanganana tsirairay isika, ary mampiasa lafymargin
ratsin'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 .container
na ny .container-fluid
ray aman-dreny dia mety mila ahitsy 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
:
<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>
Vahaolana iray hafa dia ny manampy fonosana manodidina .row
ny .overflow-hidden
kilasy:
<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>
tatatra mitsangana
.gy-*
Ny kilasy dia azo ampiasaina hifehezana ny sakan'ny tatatra mitsangana. Tahaka ireo tatatra marindrano, ireo tatatra mitsangana dia mety hiteraka fihoaram-pefy eo ambanin'ny .row
faran'ny pejy iray. Raha mitranga izany, dia ampidirinao manodidina .row
ny .overflow-hidden
kilasy:
<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>
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-hidden
kilasy wrapper.
<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>
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.
<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>
Tsy misy tatatra
Azo esorina miaraka amin'ny .g-0
. Izany dia manala ny ratsy sy margin
ny .row
marindrano padding
amin'ny tsanganana ankizy rehetra.
Mila endrika mitongilana? Atsaharo ny ray aman-dreny .container
na .container-fluid
.
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).
<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>
Hanova ny tatatra
Ny kilasy dia natsangana avy amin'ny $gutters
sarintany Sass izay nolovaina tamin'ny $spacers
sarintany Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);