Beàrnan
Tha Bootstrap a’ toirt a-steach raon farsaing de chlasaichean iomaill freagairteach làmh-ghoirid agus goireasan pleadhaig gus coltas eileamaid atharrachadh.
Mar a tha e ag obair
Sònraich luachan càirdeil margin
no padding
freagairteach do eileamaid no fo-sheata de na taobhan aige le clasaichean làmh-ghoirid. A’ toirt a-steach taic do thogalaichean fa leth, gach seilbh, agus togalaichean dìreach is còmhnard. Tha clasaichean air an togail bho mhapa àbhaisteach Sass a’ dol .25rem
bho 3rem
.
Comharrachadh
Chan eil giorrachadh puing-bhriseadh annta aig goireasan farsaing a tha a’ buntainn ris a h-uile puing-briseadh, bho xs
gu . xl
Tha seo air sgàth gu bheil na clasaichean sin air an cur an sàs bho min-width: 0
agus suas, agus mar sin chan eil iad air an ceangal le ceist mheadhanan. Tha na puingean brisidh a tha air fhàgail, ge-tà, a’ toirt a-steach giorrachadh puing-bhriseadh.
Tha na clasaichean air an ainmeachadh a’ cleachdadh cruth {property}{sides}-{size}
airson xs
agus {property}{sides}-{breakpoint}-{size}
airson sm
, md
, lg
, agus xl
.
Far a bheil seilbh mar aon de:
m
- airson clasaichean a tha a 'suidheachadhmargin
p
- airson clasaichean a tha a 'suidheachadhpadding
Far a bheil taobhan mar aon de:
t
- airson clasaichean a shuidhichmargin-top
nopadding-top
b
- airson clasaichean a shuidhichmargin-bottom
nopadding-bottom
l
- airson clasaichean a shuidhichmargin-left
nopadding-left
r
- airson clasaichean a shuidhichmargin-right
nopadding-right
x
- airson clasaichean a tha a 'suidheachadh an dà chuid*-left
agus*-right
y
- airson clasaichean a tha a 'suidheachadh an dà chuid*-top
agus*-bottom
- bàn - airson clasaichean a tha a 'suidheachadh
margin
nopadding
air a h-uile 4 taobh den eileamaid
Far a bheil meud mar aon de:
0
- airson clasaichean a chuireas às domargin
nopadding
le bhith ga shuidheachadh0
1
- (gu bunaiteach) airson clasaichean a shuidhich anmargin
nopadding
gu$spacer * .25
2
- (gu bunaiteach) airson clasaichean a shuidhich anmargin
nopadding
gu$spacer * .5
3
- (gu bunaiteach) airson clasaichean a shuidhich anmargin
nopadding
gu$spacer
4
- (gu bunaiteach) airson clasaichean a shuidhich anmargin
nopadding
gu$spacer * 1.5
5
- (gu bunaiteach) airson clasaichean a shuidhich anmargin
nopadding
gu$spacer * 3
auto
- airson clasaichean a tha a 'suidheachadh anmargin
gu fèin-ghluasadach
(Faodaidh tu barrachd mheudan a chur ris le bhith a’ cur inntrigidhean ri $spacers
caochladair mapa Sass.)
Eisimpleirean
Seo eisimpleirean riochdachail de na clasaichean seo:
.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;
}
Ionadachadh còmhnard
A bharrachd air an sin, tha Bootstrap cuideachd a’ toirt a-steach .mx-auto
clas airson susbaint ìre bloc leud stèidhichte gu còmhnard - is e sin, susbaint aig a bheil display: block
agus width
seata - le bhith a ’suidheachadh na h-oirean còmhnard gu auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Iomall àicheil
Ann an CSS, margin
faodaidh togalaichean luachan àicheil a chleachdadh ( padding
chan urrainn). Mar 4.2, tha sinn air goireasan iomaill àicheil a chuir ris airson a h-uile meud iomlan neo-neoni air a liostadh gu h-àrd (me, 1
, 2
, , 3
, 4
, 5
). Tha na goireasan sin air leth freagarrach airson cutairean colbh clèithe a ghnàthachadh thairis air puingean brisidh.
Tha an co-chòrdadh cha mhòr an aon rud ris na goireasan iomaill dearbhach, bunaiteach, ach le bhith air a chur ris n
ron mheud a chaidh iarraidh. Seo eisimpleir de chlas a tha mu choinneamh .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Seo eisimpleir de bhith a’ gnàthachadh cliath Bootstrap aig a’ md
phuing-bhriseadh meadhanach ( ) agus gu h-àrd. Tha sinn air am .col
pleadhag àrdachadh le .px-md-5
agus an uairsin chuir sinn an aghaidh sin leis .mx-md-n5
a’ phàrant .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>