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 marginno paddingfreagairteach 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 .25rembho 3rem.

Comharrachadh

Chan eil giorrachadh puing-bhriseadh annta aig goireasan farsaing a tha a’ buntainn ris a h-uile puing-briseadh, bho xsgu . xlTha seo air sgàth gu bheil na clasaichean sin air an cur an sàs bho min-width: 0agus 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 xsagus {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 shuidhich margin-topnopadding-top
b- airson clasaichean a shuidhich margin-bottomnopadding-bottom
l- airson clasaichean a shuidhich margin-leftnopadding-left
r- airson clasaichean a shuidhich margin-rightnopadding-right
x- airson clasaichean a tha a 'suidheachadh an dà chuid *-leftagus*-right
y- airson clasaichean a tha a 'suidheachadh an dà chuid *-topagus*-bottom
bàn - airson clasaichean a tha a 'suidheachadh marginno paddingair a h-uile 4 taobh den eileamaid

Far a bheil meud mar aon de:

0- airson clasaichean a chuireas às do marginno paddingle bhith ga shuidheachadh0
1- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer * .25
2- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer * .5
3- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer
4- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer * 1.5
5- (gu bunaiteach) airson clasaichean a shuidhich an marginno paddinggu$spacer * 3
auto- airson clasaichean a tha a 'suidheachadh an margingu fèin-ghluasadach

(Faodaidh tu barrachd mheudan a chur ris le bhith a’ cur inntrigidhean ri $spacerscaochladair 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-autoclas airson susbaint ìre bloc leud stèidhichte gu còmhnard - is e sin, susbaint aig a bheil display: blockagus widthseata - le bhith a ’suidheachadh na h-oirean còmhnard gu auto.

Eileamaid meadhanaichte

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

Iomall àicheil

Ann an CSS, marginfaodaidh togalaichean luachan àicheil a chleachdadh ( paddingchan 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 nron 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’ mdphuing-bhriseadh meadhanach ( ) agus gu h-àrd. Tha sinn air am .colpleadhag àrdachadh le .px-md-5agus an uairsin chuir sinn an aghaidh sin leis .mx-md-n5a’ phàrant .row.

Padding colbh gnàthaichte

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