Tazara

Bootstrap ya haɗa da faffadan kewayon gajarta amsa gajarta da azuzuwan kayan amfani don gyara kamannin wani abu.

Yadda yake aiki

Sanya ma'amala marginko paddingƙima ga wani kashi ko ɓangaren ɓangaren sa tare da azuzuwan gajeren hannu. Ya haɗa da tallafi don kaddarorin mutum ɗaya, duk kaddarorin, da kaddarorin a tsaye da a kwance. An gina azuzuwan daga taswirar Sass tsoho daga .25remzuwa 3rem.

Sanarwa

Abubuwan amfani tazara waɗanda suka shafi duk wuraren karya, daga xszuwa xl, ba su da taƙaitaccen wuri a cikinsu. Wannan saboda waɗannan azuzuwan ana amfani da su daga min-width: 0sama da sama, don haka ba a ɗaure su da tambayar kafofin watsa labarai. Ragowar wuraren hutu, duk da haka, sun haɗa da gajarta wurin hutu.

Sunayen azuzuwan suna amfani da tsarin don {property}{sides}-{size}, , , da .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

Inda dukiya take daya daga cikin:

m- don azuzuwan da aka saitamargin
p- don azuzuwan da aka saitapadding

Inda bangarorin daya ne:

t- don azuzuwan da suka saita margin-topkopadding-top
b- don azuzuwan da suka saita margin-bottomkopadding-bottom
l- don azuzuwan da suka saita margin-leftkopadding-left
r- don azuzuwan da suka saita margin-rightkopadding-right
x- domin azuzuwan cewa saita biyu *-leftda kuma*-right
y- domin azuzuwan cewa saita biyu *-topda kuma*-bottom
blank - don azuzuwan da suka saita marginko paddinga duk bangarorin 4 na kashi

Inda girman daya daga cikin:

0- don azuzuwan da ke kawar da marginko paddingta saita shi zuwa0
1- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * .25
2- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * .5
3- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer
4- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * 1.5
5- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * 3
auto- don azuzuwan da ke saita marginzuwa auto

(Zaka iya ƙara ƙarin masu girma dabam ta ƙara shigarwar zuwa $spacersmadaidaicin taswirar Sass.)

Misalai

Ga wasu misalan wakilai na waɗannan azuzuwan:

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

Tsaya a kwance

Bugu da ƙari, Bootstrap kuma ya haɗa da .mx-autoaji don a kwance madaidaiciya-tsaye ƙayyadadden abun ciki matakin toshe-wato abun ciki da ke display: blockda widthsaiti- ta hanyar saita madaidaitan maginin zuwa auto.

Abun tsakiya

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

Rage mara kyau

A cikin CSS, marginkaddarorin na iya amfani da munanan dabi'u ( paddingba za su iya ba). Tun daga 4.2, mun ƙara abubuwan amfani mara kyau na gefe don kowane girman adadi mara sifili da aka jera a sama (misali, 1, 2, 3, 4, 5). Waɗannan abubuwan amfani suna da kyau don keɓance magudanan ginshiƙan grid a cikin wuraren karya.

Rubutun ya kusan iri ɗaya ne da tsoho, kayan aikin gefe masu inganci, amma tare da ƙari nkafin girman da ake nema. Ga misali ajin wanda ke da sabanin haka .mt-1:

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

Anan ga misali na keɓance grid ɗin Bootstrap a matsakaici ( md) wurin karyewa da sama. Mun ƙãra .colmashin ɗin tare .px-md-5da kuma murkushe hakan .mx-md-n5akan iyaye .row.

Kunshin ginshiƙi na al'ada

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