Source

Spatiëring

Bootstrap bevat een breed scala aan steno responsieve marge- en opvulhulpklassen om het uiterlijk van een element te wijzigen.

Hoe het werkt

Wijs responsieve-vriendelijke marginof paddingwaarden toe aan een element of een subset van zijn zijden met stenoklassen. Bevat ondersteuning voor afzonderlijke eigenschappen, alle eigenschappen en verticale en horizontale eigenschappen. Klassen zijn opgebouwd uit een standaard Sass-kaart, variërend van .25remtot 3rem.

Notatie

Spatiëringshulpprogramma's die van toepassing zijn op alle breekpunten, van xstot xl, hebben geen breekpuntafkorting. Dit komt omdat die klassen vanaf min-width: 0en hoger worden toegepast en dus niet gebonden zijn aan een mediaquery. De overige breekpunten bevatten echter wel een breekpuntafkorting.

De klassen worden benoemd met behulp van het formaat {property}{sides}-{size}voor xsen {property}{sides}-{breakpoint}-{size}voor sm, md, lg, en xl.

Waar eigendom is een van:

m- voor lessen die setmargin
p- voor lessen die setpadding

Waar zijden een van is:

t- voor klassen die margin-topofpadding-top
b- voor klassen die margin-bottomofpadding-bottom
l- voor klassen die margin-leftofpadding-left
r- voor klassen die margin-rightofpadding-right
x- voor klassen die zowel *-leftand . instellen*-right
y- voor klassen die zowel *-topand . instellen*-bottom
blanco - voor klassen die een marginof paddingop alle 4 zijden van het element plaatsen

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Examples

Here are some representative examples of these classes:

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

Horizontal centering

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element

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

Negative margin

In CSS kunnen margineigenschappen negatieve waarden gebruiken ( paddingkan niet). Vanaf 4.2 hebben we hulpprogramma's voor negatieve marges toegevoegd voor elke hierboven vermelde gehele grootte die niet nul is (bijv. 1, 2, 3, 4, 5). Deze hulpprogramma's zijn ideaal voor het aanpassen van rasterkolomgoten over breekpunten.

De syntaxis is bijna hetzelfde als de standaardhulpprogramma's voor positieve marge, maar met de toevoeging van nvóór de gevraagde grootte. Hier is een voorbeeldklasse die het tegenovergestelde is van .mt-1:

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

Hier is een voorbeeld van het aanpassen van het Bootstrap-raster op het gemiddelde ( md) breekpunt en hoger. We hebben de .colopvulling verhoogd met .px-md-5en vervolgens tegengegaan met .mx-md-n5op de bovenliggende .row.

Aangepaste kolomvulling

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