Source

Spacing

Bootstrap omfettet in breed oanbod fan shorthand-responsive marzje- en padding-nutsklassen om it uterlik fan in elemint te feroarjen.

Hoe't it wurket

Tawizing responsive-friendly marginof paddingwearden oan in elemint of in subset fan syn kanten mei shorthand klassen. Omfettet stipe foar yndividuele eigenskippen, alle eigenskippen, en fertikale en horizontale eigenskippen. Klassen wurde boud út in standert Sass kaart fariearjend fan .25remnei 3rem.

Notaasje

Spacing utilities dy't jilde foar alle breakpoints, fan xsoant xl, hawwe gjin breakpoint ôfkoarting yn harren. Dit komt omdat dy klassen wurde tapast fan min-width: 0en omheech, en dus binne net bûn troch in media query. De oerbleaune brekpunten befetsje lykwols in brekpuntôfkoarting.

De klassen wurde neamd mei it formaat {property}{sides}-{size}foar xsen {property}{sides}-{breakpoint}-{size}foar sm, md, lg, en xl.

Wêr't eigendom ien fan is:

  • m- foar klassen dy't setmargin
  • p- foar klassen dy't setpadding

Wêr't kanten ien fan is:

  • t- foar klassen dy't set margin-topofpadding-top
  • b- foar klassen dy't set margin-bottomofpadding-bottom
  • l- foar klassen dy't set margin-leftofpadding-left
  • r- foar klassen dy't set margin-rightofpadding-right
  • x- foar klassen dy't set sawol *-leften*-right
  • y- foar klassen dy't set sawol *-topen*-bottom
  • blank - foar klassen dy't set in marginof paddingop alle 4 kanten fan it elemint

Wêr't grutte ien fan is:

  • 0- foar klassen dy't elimineren de marginof paddingtroch it ynstellen fan it0
  • 1- (standert) foar klassen dy't de marginof paddingynstelle$spacer * .25
  • 2- (standert) foar klassen dy't de marginof paddingynstelle$spacer * .5
  • 3- (standert) foar klassen dy't de marginof paddingynstelle$spacer
  • 4- (standert) foar klassen dy't de marginof paddingynstelle$spacer * 1.5
  • 5- (standert) foar klassen dy't de marginof paddingynstelle$spacer * 3
  • auto- foar klassen dy't de marginauto ynstelle

(Jo kinne mear maten tafoegje troch yngongen ta te foegjen oan de $spacersSass-kaartfariabele.)

Foarbylden

Hjir binne wat represintative foarbylden fan dizze klassen:

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

Horizontale sintraal

Derneist omfettet Bootstrap ek in .mx-autoklasse foar it horizontaal centreren fan ynhâld op fêste breedte bloknivo - dat is ynhâld dy't hat display: blocken in widthset - troch de horizontale marzjes yn te stellen op auto.

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