Spațiere

Bootstrap include o gamă largă de clase de utilitate pentru a modifica aspectul unui element.

Cum functioneaza

Atribuiți valori responsive-friendly marginsau paddingunui element sau unui subset al laturilor sale cu clase scurte. Include suport pentru proprietăți individuale, toate proprietățile și proprietățile verticale și orizontale. Clasele sunt construite dintr-o hartă Sass implicită, de la .25rempână la 3rem.

Notaţie

Utilitarele de spațiere care se aplică tuturor punctelor de întrerupere, de la xspână la xl, nu au abrevierea punctului de întrerupere în ele. Acest lucru se datorează faptului că acele clase sunt aplicate de la min-width: 0și în sus și, prin urmare, nu sunt legate de o interogare media. Punctele de întrerupere rămase, totuși, includ o abreviere a punctului de întrerupere.

Clasele sunt denumite folosind formatul {property}{sides}-{size}pentru xsși {property}{sides}-{breakpoint}-{size}pentru sm, md, lgși xl.

Acolo unde proprietatea este una dintre:

m- pentru clasele care se stabilescmargin
p- pentru clasele care se stabilescpadding

Unde laturi este una dintre:

t- pentru clasele care stabilesc margin-topsaupadding-top
b- pentru clasele care stabilesc margin-bottomsaupadding-bottom
l- pentru clasele care stabilesc margin-leftsaupadding-left
r- pentru clasele care stabilesc margin-rightsaupadding-right
x- pentru clasele care stabilesc atât *-leftși*-right
y- pentru clasele care stabilesc atât *-topși*-bottom
gol - pentru clasele care stabilesc a marginsau paddingpe toate cele 4 laturi ale elementului

Unde dimensiunea este una dintre:

0- pentru clasele care elimină marginsau paddingprin setarea la0
1- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer * .25
2- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer * .5
3- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer
4- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer * 1.5
5- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer * 3
auto- pentru clasele care setează marginla auto

(Puteți adăuga mai multe dimensiuni adăugând intrări la $spacersvariabila hartă Sass.)

Exemple

Iată câteva exemple reprezentative ale acestor clase:

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

Centrare orizontală

În plus, Bootstrap include și o .mx-autoclasă pentru centrarea orizontală a conținutului la nivel de bloc cu lățime fixă - adică conținut care are display: blockși un widthset - prin setarea marginilor orizontale la auto.

Element centrat

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