Source

Nafasi

Bootstrap inajumuisha aina mbalimbali za ukingo wa kuitikia kwa mkono mfupi na madarasa ya matumizi ya kurekebisha ili kurekebisha mwonekano wa kipengele.

Inavyofanya kazi

Weka thamani zinazofaa kuitikia marginau paddingthamani kwa kipengele au kikundi kidogo cha pande zake chenye madarasa ya mkato. Inajumuisha usaidizi wa sifa za kibinafsi, sifa zote, na sifa za wima na za mlalo. Madarasa hujengwa kutoka kwa ramani chaguo-msingi ya Sass kuanzia .25remhadi 3rem.

Nukuu

Huduma za kuweka nafasi zinazotumika kwa sehemu zote za kukatika, kuanzia xshadi xl, hazina muhtasari wa sehemu ya kukatika ndani yake. Hii ni kwa sababu madarasa hayo yanatumika kutoka min-width: 0na juu, na kwa hivyo hayafungwi na hoja ya midia. Vikwazo vilivyosalia, hata hivyo, vinajumuisha muhtasari wa sehemu ya kuvunja.

Madarasa yanaitwa kwa kutumia umbizo {property}{sides}-{size}la xsna {property}{sides}-{breakpoint}-{size}kwa sm, md, lg, na xl.

Ambapo mali ni moja ya:

m- kwa madarasa yaliyowekwamargin
p- kwa madarasa yaliyowekwapadding

Ambapo pande ni moja ya:

t- kwa madarasa yaliyowekwa margin-topaupadding-top
b- kwa madarasa yaliyowekwa margin-bottomaupadding-bottom
l- kwa madarasa yaliyowekwa margin-leftaupadding-left
r- kwa madarasa yaliyowekwa margin-rightaupadding-right
x- kwa madarasa ambayo yanaweka wote *-leftna*-right
y- kwa madarasa ambayo yanaweka wote *-topna*-bottom
tupu - kwa madarasa ambayo yanaweka marginau paddingpande zote 4 za kipengele

Ambapo saizi ni moja ya:

0- kwa madarasa ambayo huondoa marginau paddingkwa kuiweka0
1- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer * .25
2- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer * .5
3- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer
4- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer * 1.5
5- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer * 3
auto- kwa madarasa ambayo yanaweka marginkiotomatiki

(Unaweza kuongeza saizi zaidi kwa kuongeza maingizo kwenye utofauti wa $spacersramani ya Sass.)

Mifano

Hapa kuna mifano ya uwakilishi wa madarasa haya:

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

Kuweka katikati kwa usawa

Zaidi ya hayo, Bootstrap pia inajumuisha .mx-autodarasa la kuweka mlalo maudhui ya kiwango cha kuzuia upana usiobadilika—yaani, maudhui ambayo yana display: blockna widthseti—kwa kuweka ukingo mlalo hadi auto.

Kipengele kilicho katikati

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

Ukingo hasi

Katika CSS, marginsifa zinaweza kutumia maadili hasi ( paddinghayawezi). Kufikia 4.2, tumeongeza huduma za ukingo hasi kwa kila saizi kamili isiyo ya sufuri iliyoorodheshwa hapo juu (km, 1, 2, 3, 4, 5). Huduma hizi ni bora kwa kubinafsisha mifereji ya safu wima kwenye sehemu za kukatiza.

Sintaksia ni karibu sawa na huduma chaguo-msingi, chanya, lakini pamoja na nyongeza ya nkabla ya saizi iliyoombwa. Hapa kuna darasa la mfano ambalo ni kinyume cha .mt-1:

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

Huu hapa ni mfano wa kubinafsisha gridi ya Bootstrap kwenye kituo cha kati ( md) na hapo juu. Tumeongeza .colpedi .px-md-5na kisha kupingana na hiyo kwa .mx-md-n5mzazi .row.

Uwekaji safu maalum

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>