Dodome dometsotso

Bootstrap lɔ shorthand responsive margin kple padding utility class vovovowo ɖe eme be woatrɔ asi le element aɖe ƒe dzedzeme ŋu.

Ale si wòwɔa dɔe

De ŋuɖoɖo-xɔlɔ̃wɔwɔ marginalo paddingasixɔxɔwo asi na element alo eƒe axawo ƒe akpa sue aɖe kple nuŋɔŋlɔ kpui ƒe klasswo. Kpekpeɖeŋu na nɔnɔme ɖekaɖekawo, nɔnɔmewo katã, kple nɔnɔme siwo le tsitrenu kple esiwo le tsia dzi la le eme. Wotua klasswo tso Sass ƒe anyigbatata si woɖo ɖi si tso .25remvaseɖe 3rem.

Nuŋɔŋlɔ

Dometsotso ƒe dɔwɔnu siwo ku ɖe breakpoints katã ŋu, tso xsvaseɖe xl, mekpɔ breakpoint ƒe kpukpui aɖeke le wo me o. Esia le alea elabena wowɔa klass mawo ŋudɔ tso min-width: 0kple dzi, eye to esia me la, womeblaa wo kple nyadzɔdzɔgblɔmɔnuwo ƒe biabia o. Gake breakpoint susɔeawo dometɔ aɖewoe nye breakpoint kpukpui aɖe.

Wozãa nɔnɔme {property}{sides}-{size}si nye , , , xskple .{property}{sides}-{breakpoint}-{size}smmdlgxl

Afisiwo nunɔamesiwo nye:

m- na klass siwo ɖomargin
p- na klass siwo ɖopadding

Afisi akpawo nye:

t- na klass siwo ɖo margin-topalopadding-top
b- na klass siwo ɖo margin-bottomalopadding-bottom
l- na klass siwo ɖo margin-leftalopadding-left
r- na klass siwo ɖo margin-rightalopadding-right
x- na klass siwo ɖoa evea siaa *-leftkple*-right
y- na klass siwo ɖoa evea siaa *-topkple*-bottom
blank - na klass siwo ɖo a marginalo paddingɖe element la ƒe akpa 4 katã dzi

Afisi lolome nye:

0- na klass siwo ɖea marginalo paddingto eɖoɖo ɖe0
1- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer * .25
2- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer * .5
3- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer
4- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer * 1.5
5- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer * 3
auto- na klass siwo ɖoa marginbe auto

(Àteŋu atsɔ lolome bubuwo akpe ɖe eŋu to nyawo tsɔtsɔ kpe ɖe $spacersSass ƒe anyigbatata ƒe tɔtrɔ ŋu me.)

Kpɔɖeŋuwo

Klass siawo ƒe kpɔɖeŋu aɖewo siwo tsi tre ɖi na lae nye esi:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Titina si le tsia dzi

Tsɔ kpe ɖe eŋu la, Bootstrap hã de .mx-autoklass aɖe si me woatsɔ aɖo titina le tsia dzi le fixed-width block level content—si fia be, content that has display: blockand a widthset—to ɖoɖowɔwɔ ɖe horizontal margins ɖe auto.

Nusi le titina

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>