Kosala esika oyo ezali na kati
Bootstrap ezali na ba classes ya utilité ya marge responsive ya stenographie mpe ya padding mpo na ko modifier apparence ya élément moko.
Ndenge oyo esalaka
Bopesa responsive-friendly margin
to padding
ba valeurs na élément to sous-ensemble ya ba côtés na yango na ba classes ya stenographie. Esangisi lisungi ya ba propriétés moko moko, ba propriétés nionso, mpe ba propriétés verticales mpe horizontales. Ba kelasi etongami uta na karte ya Sass ya liboso oyo ebandi na .25rem
kino na 3rem
.
Notation ya kokoma
Ba utilitaires ya espacement oyo etali ba points de rupture nionso, kobanda xs
na xl
, ezali na abréviation ya point de rupture te na kati na yango. Yango ezali mpo ete bakelasi wana esalelamaka uta min-width: 0
mpe likolo, mpe bongo ekangami te na motuna ya media. Nzokande, ba points de rupture oyo etikali ezali na abréviation ya point de rupture.
Ba kelasi epesameli nkombo na kosalelaka format {property}{sides}-{size}
mpo na xs
mpe {property}{sides}-{breakpoint}-{size}
mpo na sm
, md
, lg
, mpe xl
.
Epayi wapi biloko ezali moko ya:
m
- pona ba classes oyo ezo setmargin
p
- pona ba classes oyo ezo setpadding
Epayi wapi mipanzi ezali moko ya:
t
- mpo na bakelasi oyo etiemargin-top
topadding-top
b
- mpo na bakelasi oyo etiemargin-bottom
topadding-bottom
l
- mpo na bakelasi oyo etiemargin-left
topadding-left
r
- mpo na bakelasi oyo etiemargin-right
topadding-right
x
- mpo na bakelasi oyo etie nyonso mibale*-left
mpe*-right
y
- mpo na bakelasi oyo etie nyonso mibale*-top
mpe*-bottom
- blank - pona ba classes oyo etie a
margin
topadding
na ba côtés nionso 4 ya élément
Epayi wapi bonene ezali moko ya:
0
- mpo na bakelasi oyo elongolakamargin
topadding
na kotiaka yango na0
1
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer * .25
2
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer * .5
3
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer
4
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer * 1.5
5
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer * 3
auto
- mpo na bakelasi oyo etyakamargin
na auto
(Okoki kobakisa ba taille mosusu na kobakisa ba entrées na $spacers
variable ya carte Sass.)
Bandakisa
Talá mwa bandakisa oyo ezali komonisa bakelasi yango:
.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;
}
Centrée horizontale
En plus, Bootstrap ezali mpe na .mx-auto
classe moko mpo na ko centrer horizontalement contenus ya niveau ya bloc ya largeur fixe —elingi koloba, contenus oyo ezali na yango display: block
mpe width
ensemble moko —na kotiaka ba marges horizontales na auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marge ya négatif
Na CSS, margin
ba propriétés ekoki kosalela ba valeurs négatives ( padding
ekoki te). Kobanda na 4.2, tobakisi ba utilitaires ya marge négative mpo na taille entière nionso oyo ezali zéro te oyo etangami likolo (ndakisa, 1
, 2
, 3
, 4
, 5
). Ba utilitaires oyo ezali malamu pona ko personnaliser ba gouttières ya colonne ya grille na ba points de rupture.
Syntaxe ezali pene na ndenge moko na ba utilitaires ya marge ya défaut, ya malamu, kasi na kobakisa ya n
liboso ya bonene oyo esengami. Tala classe ya exemple oyo ezali opposé na .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Tala ndakisa ya ko personnaliser grille ya Bootstrap na md
point de rupture moyen ( ) mpe likolo. Tobakisi .col
padding na .px-md-5
et puis contrer que na .mx-md-n5
sur le parent .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>