Spacing
Bootstrap inosanganisira huwandu hwakasiyana hweshorthand inopindura margin, padding, uye gap utility makirasi kugadzirisa chitarisiko chechinhu.
Margin uye padding
Ipa inopindura-inoshamwaridzika margin
kana padding
kukosha kune chinhu kana subset yemativi ayo ane shorthand makirasi. Inosanganisira tsigiro yezvivakwa zvega, zvese zvivakwa, uye zvakamira uye zvakachinjika zvivakwa. Makirasi anovakwa kubva kune yakasarudzika mepu yeSass kubva .25rem
pa 3rem
.
Uchishandisa iyo CSS Grid marongero module? Funga kushandisa gap utility .
Notation
Spacing utilities anoshanda kune ese mabreakpoints, kubva xs
kusvika kune xxl
, haana breakpoint chidimbu mazviri. Izvi zvinodaro nekuti iwo makirasi anoshandiswa kubva min-width: 0
nekukwira, uye nekudaro haana kusungwa nemubvunzo wenhau. Iwo asara mabreakpoints, zvisinei, anosanganisira chidimbu chebreakpoint.
Makirasi anopihwa mazita pachishandiswa manyorerwo {property}{sides}-{size}
ekuti xs
uye {property}{sides}-{breakpoint}-{size}
, sm
, md
, lg
, xl
uye xxl
.
Ipo pfuma iri imwe ye:
m
- kumakirasi anogadzikamargin
p
- kumakirasi anogadzikapadding
Iko mativi ndeimwe ye:
t
- kumakirasi anoisamargin-top
kanapadding-top
b
- kumakirasi anoisamargin-bottom
kanapadding-bottom
s
- (kutanga) emakirasi anosetamargin-left
kanapadding-left
muLTR,margin-right
kanapadding-right
muRTLe
- (magumo) emakirasi anosetamargin-right
kanapadding-right
muLTR,margin-left
kanapadding-left
muRTLx
- kumakirasi anoisa zvese*-left
uye*-right
y
- kumakirasi anoisa zvese*-top
uye*-bottom
- blank - yemakirasi anoisa a
margin
kanapadding
pamativi ese mana echinhu
Uko saizi imwe ye:
0
- kumakirasi anobvisa iyomargin
kanapadding
nekuiisa kwairi0
1
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer * .25
2
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer * .5
3
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer
4
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer * 1.5
5
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer * 3
auto
- kumakirasi anoisa iyomargin
otomatiki
(Unogona kuwedzera mamwe saizi nekuwedzera zvinyorwa kune iyo $spacers
Sass mepu inosiyana.)
Mienzaniso
Heano mimwe mienzaniso inomiririra yemakirasi aya:
.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;
}
Horizontal centering
Pamusoro pezvo, Bootstrap inosanganisirawo .mx-auto
kirasi yekudzikamisa-yakafara nhanho yemukati yemukati-kureva, zvirimo zvine display: block
uye width
seti-nekuisa yakachinjika miganho ku auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative margin
MuCSS, margin
zvivakwa zvinogona kushandisa maitiro asina kunaka ( padding
haagone). Aya mapeji asina kunaka anovharwa nekusarudzika , asi anogona kugoneswa muSass nekuseta $enable-negative-margins: true
.
Iyo syntax yakada kufanana neyekutanga, yakanaka margin zvishandiso, asi nekuwedzera n
kwesati yakumbirwa saizi. Heino muenzaniso kirasi inopesana ne .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
Paunenge uchishandisa display: grid
, unogona kushandisa gap
zvishandiso pane yevabereki grid mudziyo. Izvi zvinogona kuchengetedza pakuwedzera mariji ekushandisa kune yega grid zvinhu (vana display: grid
vemudziyo). Zvishandiso zveGap zvinoteera nekusarudzika, uye zvinogadzirwa kuburikidza neyedu zvekushandisa API, zvichibva $spacers
pamepu yeSass.
<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>
Tsigiro inosanganisira inopindura sarudzo kune ese eBootstrap's grid breakpoints, pamwe nemasaizi matanhatu kubva $spacers
pamepu ( 0
- 5
). Iko hakuna .gap-auto
utility kirasi sezvo ichinyatso fanana ne .gap-0
.
Sass
Maps
Nzvimbo dzekushandisa dzinoziviswa kuburikidza nemepu yeSass uyezve inogadzirwa neyedu zvekushandisa 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);
Purogiramu inonzi Utilities
Spacing utilities inoziviswa mune zvedu zvekushandisa API mu scss/_utilities.scss
. Dzidza mashandisiro ezvishandiso 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
),