Yɔrɔjanbɔli

Bootstrap bɛ ni shorthand responsive margin ani padding utility classes caman ye walasa ka fɛn dɔ cogoya sɛmɛntiya.

A bɛ baara kɛ cogo min na

A’ ye jaabi-terikɛ marginwalima paddingnafaw Di fɛn dɔ ma walima a fanw kulu fitinin dɔ ma ni sɛbɛnni surun kalanw ye. Dɛmɛ bɛ sɔrɔ nafolo kelen-kelenw na, nafolo bɛɛ, ani nafolo jɔlenw ni jɔlenw na. Kalansow bɛ jɔ ka bɔ Sass karti dafalen na min bɛ daminɛ ka .25remse 3rem.

Kɔlɔsili

Spacing utilities minnu bɛ tali kɛ breakpoints bɛɛ la, k’a ta xska se xl, breakpoint surunyalen tɛ olu la. O bɛ Kɛ k’a sababu Kɛ o kàlanw bɛ Kɛ ka Bɔ min-width: 0ka Taa san fɛ, wa o cogo la u tɛ siri ni kunnafonidilan ɲininkali ye. Nka, kari-yɔrɔ tɔw la, kari-yɔrɔ surunyalen dɔ bɛ yen.

Kalansow tɔgɔ bɛ fɔ ni cogoya {property}{sides}-{size}ye , , , ani .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

Yɔrɔ min na nafolo ye dɔ ye:

m- ka ɲɛsin kalanw ma minnu bɛ sigimargin
p- ka ɲɛsin kalanw ma minnu bɛ sigipadding

Yɔrɔ min na fanw ye kelen ye:

t- ka ɲɛsin kalanw ma minnu bɛ sigi margin-topwalimapadding-top
b- ka ɲɛsin kalanw ma minnu bɛ sigi margin-bottomwalimapadding-bottom
l- ka ɲɛsin kalanw ma minnu bɛ sigi margin-leftwalimapadding-left
r- ka ɲɛsin kalanw ma minnu bɛ sigi margin-rightwalimapadding-right
x- ka ɲɛsin kalanw ma minnu bɛ u fila bɛɛ sigi *-leftani*-right
y- ka ɲɛsin kalanw ma minnu bɛ u fila bɛɛ sigi *-topani*-bottom
blank - ka ɲɛsin kalanw ma minnu bɛ a marginwalima paddinga sigi element fan 4 bɛɛ kan

Yɔrɔ min na bonya ye dɔ ye:

0- ka ɲɛsin kalanw ma minnu bɛ marginwalima paddingni a sigili ye0
1- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer * .25
2- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer * .5
3- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer
4- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer * 1.5
5- (ka da a kan) ka ɲɛsin kalansenw ma minnu bɛ marginwalima paddingka sigi$spacer * 3
auto- ka ɲɛsin kalanw ma minnu bɛ sigi ka marginto auto

(Aw bɛ se ka hakɛ wɛrɛw fara a kan ni aw ye sɛbɛnniw fara $spacersSass karti sɛgɛsɛgɛli kan.)

Misaliw

Nin kalan ninnu misali jiralen dɔw filɛ nin ye:

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

Cɛmancɛ-yɔrɔ-ko-yɔrɔ-ko-yɔrɔ-ko

Ka fara o kan, Bootstrap fana bɛ .mx-autokalasi dɔ kɔnɔ min bɛ kɛ ka fixed-width block level kɔnɔkow cɛmancɛ kɛ tilennen na—o kɔrɔ ye ko kɔnɔkow minnu bɛ yen display: blockani widthset dɔ—ni u bɛ margins horizontalw sigi auto.

Eleman min bɛ cɛmancɛ la

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

Marge négatif (Marge négatif) ye

CSS kɔnɔ, marginnafolomafɛnw bɛ se ka baara kɛ ni nafa juguw ye ( paddinga tɛ se ka kɛ). Kabini 4.2 la, an ye nafalan juguw fara jateden dafalenw bɛɛ kan minnu tɛ zeru ye minnu kofɔlen bɛ sanfɛ (misali la, 1, 2, 3, 4, 5). O nafamafɛnw ka ɲi kosɛbɛ walasa ka grid column gutters customize ka tɛmɛn breakpoints kan.

Sinsinnan bɛ surunya kelen na ni default, positive margin utilities ye, nka ni farali ye nka kɔn hakɛ ɲininen ɲɛ. Nin ye misali kalan ye min ni .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Nin ye misali ye Bootstrap grid ladamuni na medium ( md) breakpoint na ani sanfɛ. an ye dɔ fara .colpadding kan ni .px-md-5ka sɔrɔ ka counteract o ni .mx-md-n5kan bangebaga .row.

Kolon padding min bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>