Kosala esika oyo ezali na kati

Bootstrap ezali na ba classes ya utilitaire ya marge responsive ya stenographie mpe ya padding mpo na ko modifier apparence ya élément moko.

Ndenge oyo esalaka

Bopesa responsive-friendly marginto paddingba 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 .25remkino na 3rem.

Notation ya kokoma

Ba utilitaires ya espacement oyo etali ba points de rupture nionso, kobanda xsna xl, ezali na abréviation ya point de rupture te na kati na yango. Yango ezali mpo ete bakelasi wana esalelamaka uta min-width: 0mpe 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 xsmpe {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- pona ba classes oyo etie margin-toptopadding-top
b- pona ba classes oyo etie margin-bottomtopadding-bottom
l- pona ba classes oyo etie margin-lefttopadding-left
r- pona ba classes oyo etie margin-righttopadding-right
x- mpo na bakelasi oyo etie nyonso mibale *-leftmpe*-right
y- mpo na bakelasi oyo etie nyonso mibale *-topmpe*-bottom
blank - pona ba classes oyo etie a marginto paddingna ba côtés nionso 4 ya élément

Epayi wapi bonene ezali moko ya:

0- mpo na bakelasi oyo elongolaka marginto paddingna kotiaka yango na0
1- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * .25
2- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * .5
3- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer
4- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * 1.5
5- (par défaut) mpo na ba classes oyo etie marginto paddingna$spacer * 3
auto- mpo na bakelasi oyo etyaka marginna auto

(Okoki kobakisa ba taille mosusu na kobakisa ba entrées na $spacersvariable 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-autoclasse moko mpo na ko centrer horizontalement contenus ya niveau ya bloc ya largeur fixe —elingi koloba, contenus oyo ezali na yango display: blockmpe widthensemble moko —na kotiaka ba marges horizontales na auto.

Elemento centrado

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

Marge ya négatif

Na CSS, marginba propriétés ekoki kosalela ba valeurs négatives ( paddingekoki 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 nliboso 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 mdpoint de rupture moyen ( ) mpe likolo. Tobakisi .colpadding na .px-md-5et puis contrer que na .mx-md-n5sur le parent .row.

Padding ya colonne personnalisé

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