Source

Mokowā

Kei roto i te Bootstrap te whānuitanga o te tawhwhanga whakautu poto me nga karaehe whaipainga padding ki te whakarereke i te ahua o tetahi huānga.

Pehea te mahi

Hoatu he uara aro-a-hoa margin, paddinguara ranei ki tetahi huānga, ki tetahi waahanga iti ranei o ona taha me nga karaehe poto. Kei roto ko te tautoko mo nga ahuatanga takitahi, nga ahuatanga katoa, me nga waahanga poutū me te whakapae. Ka hangaia nga karaehe mai i te mapi Sass taunoa mai i .25remte 3rem.

Tohutohu

Ko nga taputapu mokowhiti e pa ana ki nga waahi wehenga katoa, mai i xste xl, karekau he whakapototanga mokowhiti i roto. Ko tenei na te mea kua tonohia aua karaehe mai i min-width: 0runga ake, no reira karekau e herea e te patai pāpāho. Heoi ano, kei roto i nga toenga wehenga he whakapototanga mokowhiti.

Ka whakaingoatia nga karaehe ma te whakamahi i te whakatakotoranga {property}{sides}-{size}mo xsme {property}{sides}-{breakpoint}-{size}mo sm, md, lg, me xl.

Ko nga taonga tetahi o:

m- mo nga karaehe kua whakariteamargin
p- mo nga karaehe kua whakariteapadding

Ko nga taha tetahi o:

t- mo nga karaehe e whakatakoto ana margin-topraneipadding-top
b- mo nga karaehe e whakatakoto ana margin-bottomraneipadding-bottom
l- mo nga karaehe e whakatakoto ana margin-leftraneipadding-left
r- mo nga karaehe e whakatakoto ana margin-rightraneipadding-right
x- mo nga akomanga e whakarite ana i nga mea e rua *-leftme te*-right
y- mo nga akomanga e whakarite ana i nga mea e rua *-topme te*-bottom
pātea - mō ngā karaehe e whakatakoto ana i ngā taha e 4 rānei o te marginhuāngapadding

Ko te rahi tetahi o:

0- mo nga karaehe ka whakakore i te margin, paddingma te tautuhi ranei ki0
1- (ma te taunoa) mo nga karaehe e tautuhi ana i te ki marginraneipadding$spacer * .25
2- (ma te taunoa) mo nga karaehe e tautuhi ana i te ki marginraneipadding$spacer * .5
3- (ma te taunoa) mo nga karaehe e tautuhi ana i te ki marginraneipadding$spacer
4- (ma te taunoa) mo nga karaehe e tautuhi ana i te ki marginraneipadding$spacer * 1.5
5- (ma te taunoa) mo nga karaehe e tautuhi ana i te ki marginraneipadding$spacer * 3
auto- mo nga karaehe e tautuhi ana i te marginki auto

(Ka taea e koe te taapiri i etahi atu rahi ma te taapiri i nga urunga ki te $spacerstaurangi mahere Sass.)

Tauira

Anei etahi tauira o enei akomanga:

.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;
}

Whakawaenga waenganui

I tua atu, kei roto ano i a Bootstrap tetahi .mx-autokaraehe mo te whakamau whakapae i nga ihirangi taumata paraka whanui-whanui—ara, nga ihirangi kei a ia display: blockme te widthhuinga—ma te tautuhi i nga tawhē whakapae ki auto.

Huānga Pokapū

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

Tawhē tōraro

I roto i te CSS, marginka taea e nga taonga te whakamahi i nga uara kino ( paddingkaore e taea). Mai i te 4.2, kua taapirihia e matou nga taputapu tawhē kino mo ia rahi tauoti kore-kore kua whakarārangihia i runga ake nei (hei tauira, 1, 2, 3, 4, 5). He pai enei taputapu mo te whakarite i nga awaawa o nga pou matiti puta noa i nga waahi pakaru.

He rite tonu te wetereo ki te taunoa, nga taputapu tawhē pai, engari me te taapiri i nmua i te rahi i tonoa. Anei tetahi tauira akomanga he rerekee o .mt-1:

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

Anei tetahi tauira o te whakarite i te matiti Bootstrap i te mdwaahi ( ) wehe me runga ake. Kua whakanuia e matou te .colhoe me .px-md-5te katahi ka parea atu .mx-md-n5ki te matua .row.

Padding tīwae ritenga

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>