Spațiere
Bootstrap include o gamă largă de clase de utilitate pentru a modifica aspectul unui element.
Cum functioneaza
Atribuiți valori responsive-friendly margin
sau padding
unui 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 .25rem
până la 3rem
.
Notaţie
Utilitarele de spațiere care se aplică tuturor punctelor de întrerupere, de la xs
pâ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 stabilescmargin-top
saupadding-top
b
- pentru clasele care stabilescmargin-bottom
saupadding-bottom
l
- pentru clasele care stabilescmargin-left
saupadding-left
r
- pentru clasele care stabilescmargin-right
saupadding-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
margin
saupadding
pe toate cele 4 laturi ale elementului
Unde dimensiunea este una dintre:
0
- pentru clasele care eliminămargin
saupadding
prin setarea la0
1
- (în mod implicit) pentru clasele care seteazămargin
saupadding
la$spacer * .25
2
- (în mod implicit) pentru clasele care seteazămargin
saupadding
la$spacer * .5
3
- (în mod implicit) pentru clasele care seteazămargin
saupadding
la$spacer
4
- (în mod implicit) pentru clasele care seteazămargin
saupadding
la$spacer * 1.5
5
- (în mod implicit) pentru clasele care seteazămargin
saupadding
la$spacer * 3
auto
- pentru clasele care seteazămargin
automat
(Puteți adăuga mai multe dimensiuni adăugând intrări la $spacers
variabila 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-auto
clasă pentru centrarea orizontală a conținutului la nivel de bloc cu lățime fixă - adică conținut care are display: block
și un width
set - prin setarea marginilor orizontale la auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marja negativă
În CSS, margin
proprietățile pot utiliza valori negative ( padding
nu 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 .col
umplutura cu .px-md-5
și apoi l-am contracarat cu .mx-md-n5
pe părinte .row
.
<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>