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>

Negative marzje

Yn CSS kinne margineigenskippen negative wearden brûke ( paddingnet). Fanôf 4.2 hawwe wy nutsfoarsjennings foar negative marzjes tafoege foar elke hjirboppe neamde grutte net-nul (bygelyks, 1, 2, 3, 4, 5). Dizze nutsfoarsjenningen binne ideaal foar it oanpassen fan roasterkolomgoaten oer brekpunten.

De syntaksis is hast itselde as de standert, positive marzje-nutsbedriuwen, mar mei de tafoeging fan nfoardat de frege grutte. Hjir is in foarbyldklasse dy't it tsjinoerstelde is fan .mt-1:

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

Hjir is in foarbyld fan it oanpassen fan it Bootstrap-raster op it medium ( md) brekpunt en boppe. Wy hawwe de .colpadding ferhege mei .px-md-5en dat tsjinwurke mei .mx-md-n5op 'e âlder .row.

Oanpaste kolom padding

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