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.

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

Negatibo a margin

Iti CSS, margindagiti tagikua ket mabalinda nga usaren dagiti negatibo a pateg ( paddingsaan). Manipud iti 4.2, innayonmi dagiti negatibo a margin a utilidad para iti tunggal maysa a saan a sero nga intero a bilang a nailista iti ngato (kas pagarigan, 1, 2, 3, 4, 5). Dagitoy a utilidad ket nasayaat para iti panagpasayaat kadagiti grid column gutters iti ballasiw dagiti breakpoint.

Ti sintaksis ket gangani a kapada ti kasisigud, positibo a margin a utilidad, ngem addaan ti pannakainayon ti nsakbay ti kiniddaw a kadakkel. Adda ditoy ti pagarigan a klase a kasungani ti .mt-1:

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

Adda ditoy ti pagarigan ti panangipasayaat ti grid ti Bootstrap iti medium ( md) a breakpoint ken iti ngato. Napadakkelmi ti .colpadding nga addaan .px-md-5ken kalpasanna kinontrami dayta nga addaan .mx-md-n5iti nagannak .row.

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