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. 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 laturile 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ă marginautomat

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

Marja negativă

În CSS, marginproprietățile pot utiliza valori negative ( paddingnu pot). Începând cu 4.2, am adăugat utilități de marjă negativă pentru fiecare dimensiune întreg diferită de zero enumerată mai sus (de exemplu, 1, 2, 3, 4, 5). Aceste utilități sunt ideale pentru personalizarea jgheaburilor coloanei de grilă peste punctele de întrerupere.

Sintaxa este aproape aceeași cu utilitățile implicite, cu marjă pozitivă, dar cu adăugarea de nînainte de dimensiunea cerută. Iată un exemplu de clasă care este opusul .mt-1:

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

Iată un exemplu de personalizare a grilei Bootstrap la punctul de mdîntrerupere mediu ( ) și mai sus. Am mărit .columplutura cu .px-md-5și apoi l-am contracarat cu .mx-md-n5pe părinte .row.

Umplutură personalizată a coloanei

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