Mokowā
Kei roto i te Bootstrap te whānuitanga o nga tawhwhanga whakautu poto, papaa, me nga karaehe whaipainga mokowhiti hei whakarereke i te ahua o tetahi huānga.
Tawhē me te hoe
Hoatu he uara aro-a-hoa margin
, padding
uara 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 .25rem
te 3rem
.
Te whakamahi i te kōwae tahora Mātiti CSS? Whakaarohia te whakamahi i te whaipainga gap .
Tohutohu
Ko nga taputapu mokowhiti e pa ana ki nga waahi wehenga katoa, mai i xs
te xxl
, karekau he whakapototanga mokowhiti i roto. Ko tenei na te mea kua tonohia aua karaehe mai i min-width: 0
runga 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 xs
me {property}{sides}-{breakpoint}-{size}
mo sm
, md
, lg
, xl
, me xxl
.
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 anamargin-top
raneipadding-top
b
- mo nga karaehe e whakatakoto anamargin-bottom
raneipadding-bottom
s
- (Tīmata) mo nga karaehe kua tautuhi , i rotomargin-left
raneipadding-left
i te LTR, i te RTLmargin-right
raneipadding-right
e
- (mutunga) mo nga karaehe i whakatakoto , i rotomargin-right
raneipadding-right
i te LTR, i te RTLmargin-left
raneipadding-left
x
- mo nga akomanga e whakarite ana i nga mea e rua*-left
me te*-right
y
- mo nga akomanga e whakarite ana i nga mea e rua*-top
me te*-bottom
- pātea - mō ngā karaehe e whakatakoto ana i ngā taha e 4 rānei o te
margin
huāngapadding
Ko te rahi tetahi o:
0
- mo nga karaehe ka whakakore i temargin
,padding
ma te tautuhi ranei ki0
1
- (ma te taunoa) mo nga karaehe e tautuhi ana i te kimargin
raneipadding
$spacer * .25
2
- (ma te taunoa) mo nga karaehe e tautuhi ana i te kimargin
raneipadding
$spacer * .5
3
- (ma te taunoa) mo nga karaehe e tautuhi ana i te kimargin
raneipadding
$spacer
4
- (ma te taunoa) mo nga karaehe e tautuhi ana i te kimargin
raneipadding
$spacer * 1.5
5
- (ma te taunoa) mo nga karaehe e tautuhi ana i te kimargin
raneipadding
$spacer * 3
auto
- mo nga karaehe e tautuhi ana i temargin
ki auto
(Ka taea e koe te taapiri i etahi atu rahi ma te taapiri i nga urunga ki te $spacers
taurangi mahere Sass.)
Tauira
Anei etahi tauira o enei akomanga:
.mt-0 {
margin-top: 0 !important;
}
.ms-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-auto
karaehe mo te whakamau whakapae i nga ihirangi taumata paraka whanui-whanui—ara, nga ihirangi kei a ia display: block
me te width
huinga—ma te tautuhi i nga tawhē whakapae ki auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Tawhē tōraro
I roto i te CSS, margin
ka taea e nga taonga te whakamahi i nga uara kino ( padding
kaore e taea). Ko enei tawhē kino kua monoa ma te taunoa , engari ka taea te whakahohe ki Sass ma te tautuhi $enable-negative-margins: true
.
He rite tonu te wetereo ki te taunoa, nga taputapu tawhē pai, engari me te taapiri i n
mua i te rahi i tonoa. Anei tetahi tauira akomanga he rerekee o .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
āputa
I te wa e whakamahi ana display: grid
, ka taea e koe te whakamahi i nga gap
taputapu kei runga i te ipu matiti matua. Ka taea e tenei te tiaki i te taapiri i nga taputapu tawhē ki nga mea matiti takitahi (tamariki o te display: grid
ipu). Ko nga taputapu Gap he whakautu taunoa, ka hangaia ma o maatau taputapu API, i runga i te $spacers
mahere Sass.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Kei roto i te tautoko nga whiringa urupare mo nga waahi wehenga matiti katoa a Bootstrap, me nga rahi e ono mai i te $spacers
mapi ( 0
– 5
). Karekau he .gap-auto
karaehe whaipainga na te mea he rite tonu ki te .gap-0
.
Sass
Mahere
Ka whakaatuhia nga taputapu mokowhiti ma te mahere Sass katahi ka hangaia me o maatau taputapu API.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
API taputapu
Ko nga taputapu mokowhiti kua whakahuahia i roto i o maatau taputapu API i roto i scss/_utilities.scss
. Akohia me pehea te whakamahi i nga taputapu API.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),