Source

Panagsisina

Ti Bootstrap ket mangiraman ti nasaknap a sakop ti shorthand a sumungbat a margin ken dagiti klase ti utilidad ti padding tapno baliwan ti langa ti maysa nga elemento.

No kasano ti panagandar dayta

Ituding dagiti responsive-friendly marginwenno paddingdagiti pateg iti maysa nga elemento wenno ti subgrupo dagiti sikiganna nga addaan kadagiti klase ti shorthand. Iramanna ti suporta para kadagiti indibidual a tagikua, amin a tagikua, ken dagiti bertikal ken horisontal a tagikua. Dagiti klase ket naibangon manipud iti default a mapa ti Sass manipud iti .25remaginggana iti 3rem.

Notasion

Dagiti utilidad ti panagsisina a maipakat kadagiti amin a puntos ti panagburak, manipud iti xsaginggana xl, ket awan ti pannakapaababa ti puntos ti panagsina kadagitoy. Daytoy ket gapu ta dagitoy a klase ket maipakat manipud min-width: 0ken agpangato, ken iti kasta ket saan a naisinggalut babaen ti maysa a panagsaludsod ti media. Dagiti nabati a breakpoint, nupay kasta, ket talaga a mangiraman ti maysa nga ababa a breakpoint.

Dagiti klase ket nainaganan babaen ti panagusar ti pormat {property}{sides}-{size}para xsken {property}{sides}-{breakpoint}-{size}para iti sm, md, lg, ken xl.

No sadino a ti sanikua ket maysa kadagiti:

  • m- para kadagiti klase nga agsetmargin
  • p- para kadagiti klase nga agsetpadding

Sadino ti sides ket maysa kadagiti:

  • t- para kadagiti klase a mangikeddeng margin-topwennopadding-top
  • b- para kadagiti klase a mangikeddeng margin-bottomwennopadding-bottom
  • l- para kadagiti klase a mangikeddeng margin-leftwennopadding-left
  • r- para kadagiti klase a mangikeddeng margin-rightwennopadding-right
  • x- para kadagiti klase a mangikeddeng nga agpada *-leftken*-right
  • y- para kadagiti klase a mangikeddeng nga agpada *-topken*-bottom
  • blangko - para kadagiti klase a mangikeddeng ti maysa marginwenno paddingiti amin nga 4 a sikigan ti elemento

Saan a ti kadakkel ket maysa kadagiti:

  • 0- para kadagiti klase a mangikkat iti marginwenno paddingbabaen ti panangisaad iti dayta iti0
  • 1- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer * .25
  • 2- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer * .5
  • 3- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer
  • 4- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer * 1.5
  • 5- (babaen ti default) para kadagiti klase a mangikeddeng ti marginwenno paddingiti$spacer * 3
  • auto- para kadagiti klase a mangiset ti marginto auto

(Mabalinmo ti manginayon kadagiti ad-adu pay a kadakkel babaen ti pananginayon kadagiti panagserrek iti $spacersvariable ti mapa ti Sass.)

Dagiti pagarigan

Adtoy dagiti sumagmamano a pannakabagi a pagarigan dagitoy a klase:

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

Paisaad a panagsentro

Iti pay maipatinayon, ti Bootstrap ket mangiraman pay ti maysa a .mx-autoklase para iti horisontal a panagsentro ti naikeddeng-kalawa a linaon ti lebel ti bloke—kayatna a sawen, ti linaon nga addaan display: blockken ti maysa a widthset—babaen ti panangisaad kadagiti horisontal a pingir iti auto.

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