Avanoa
O le Bootstrap e aofia ai le tele o vaega fa'apipi'i tali ma vasega fa'aoga e fa'aleleia ai foliga o se elemene.
E faapefea ona galue
Tofi tali-faauo margin
po o padding
tulaga faatauaina i se elemene po o se vaega itiiti o ona itu ma vasega pupuu. E aofia ai le lagolago mo meatotino ta'itasi, meatotino uma, ma mea tu'usa'o ma fa'ata'atia. O vasega e fausia mai se fa'afanua fa'aletonu Sass e amata mai .25rem
i le 3rem
.
Notation
Fa'aoga avanoa e fa'aoga i vaega ta'oto uma, mai xs
i le xl
, e leai se fa'apu'upu'u va'aiga i totonu. E mafua ona o na vasega o loʻo faʻaoga mai min-width: 0
ma luga, ma o lea e le o noatia i se fesili a le aufaasālalau. Ae peitai, o vaega o totoe, e aofia ai se faapuupuuga.
O vasega ua faaigoaina e faaaoga ai le faatulagaga {property}{sides}-{size}
mo xs
ma {property}{sides}-{breakpoint}-{size}
mo sm
, md
, lg
, ma xl
.
Afai o meatotino o se tasi o:
m
- mo vasega ua setiinamargin
p
- mo vasega ua setiinapadding
O fea itu o se tasi o:
t
- mo vasega e setimargin-top
pepadding-top
b
- mo vasega e setimargin-bottom
pepadding-bottom
l
- mo vasega e setimargin-left
pepadding-left
r
- mo vasega e setimargin-right
pepadding-right
x
- mo vasega e seti uma*-left
ma*-right
y
- mo vasega e seti uma*-top
ma*-bottom
- avanoa - mo vasega e seti se
margin
po'opadding
luga uma 4 itu o le elemene
Ole tele ole tasi ole:
0
- mo vasega e aveese lemargin
popadding
o le setiina i0
1
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer * .25
2
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer * .5
3
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer
4
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer * 1.5
5
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer * 3
auto
- mo vasega e setiina lemargin
i le auto
(E mafai ona e faʻaopoopoina le tele o lapopoa e ala i le faʻaopoopoina o faʻamaumauga i le $spacers
fesuiaiga o faʻafanua Sass.)
Faataitaiga
O nisi nei o fa'ata'ita'iga fa'atusa o nei vasega:
.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;
}
Tutotonuga faalava
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
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative margin
In CSS, margin
properties can utilize negative values (padding
cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 1
, 2
, 3
, 4
, 5
). These utilities are ideal for customizing grid column gutters across breakpoints.
The syntax is nearly the same as the default, positive margin utilities, but with the addition of n
before the requested size. Here’s an example class that’s the opposite of .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
O se fa'ata'ita'iga lea o le fa'avasegaina o le fa'asologa o Bootstrap i le vaeluaga ( md
) vaeluaga ma luga. Ua matou fa'aopoopoina le .col
padding .px-md-5
ma ona fa'afetaui lea .mx-md-n5
i le matua .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>