Kala dheeraynta

Bootstrap waxa ku jira tiro balaadhan oo ah margin ka jawaabida gacan gaaban iyo fasalada utility padding si wax looga beddelo muuqaalka shay.

Sida ay u shaqeyso

U qoondee saaxiibtinimo-saaxiibtinimo marginama paddingqiyamka shay ama qayb ka mid ah dhinacyadiisa oo leh fasalo gaaban. Waxaa ku jira taageerada guryaha gaarka ah, dhammaan guryaha, iyo kuwa toosan iyo kuwa jiifka ah. Fasallada waxaa laga dhisay khariidadda Sass ee caadiga ah oo u dhaxaysa .25remilaa 3rem.

Ogaysiis

Kala dheeraynta yutiilitida ee khuseeya dhammaan meelaha jabinta, laga bilaabo xsilaa xl, kuma jiraan wax soo gaabin ah. Tani waa sababta oo ah fasalladaas waxaa laga dalbadaa min-width: 0kor iyo kor, sidaas darteed kuma xirna su'aal warbaahineed. Dhibcaha soo haray, si kastaba ha ahaatee, waxaa ku jira soo gaabinta barta jabinta.

{property}{sides}-{size}Fasallada waxaa lagu magacaabay qaabka xsiyo {property}{sides}-{breakpoint}-{size}, sm, md, lgiyo xl.

Halka hantidu ka mid tahay:

m- fasallada dhigaymargin
p- fasallada dhigaypadding

Halka dhinacyadu ay ka mid yihiin:

t- fasallada dhigay margin-topamapadding-top
b- fasallada dhigay margin-bottomamapadding-bottom
l- fasallada dhigay margin-leftamapadding-left
r- fasallada dhigay margin-rightamapadding-right
x- fasallada dhigay labada *-leftiyo*-right
y- fasallada dhigay labada *-topiyo*-bottom
maran - fasallada dhigay a marginama paddingdhammaan 4 dhinac ee curiyaha

Halka cabbirku yahay mid ka mid ah:

0- fasallada meesha ka saaraya marginama paddingdejinaya0
1- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer * .25
2- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer * .5
3- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer
4- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer * 1.5
5- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer * 3
auto- fasallada u dejinaya marginauto

(Waxaad ku dari kartaa cabbirro badan adiga oo ku daraya gelinta $spacersdoorsoomiyaha khariidada Sass.)

Tusaalooyinka

Waa kuwan qaar ka mid ah tusaalayaal matala fasalladan:

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

Dhexdhexaadinta

Intaa waxa dheer, Bootstrap waxa kale oo ka mid ah .mx-autofasal si toos ah u dhexeya nuxurka heerka balac ballaca go'an - taas oo ah, waxa ka kooban display: blockiyo widthgo'an-adiga oo dejinaya soohdimaha toosan auto.

Cunsurka dhexe

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

Margin xun

CSS gudaheeda, marginguryaha waxay isticmaali karaan qiimayaal taban ( paddingma karaan). Marka la eego 4.2, waxaanu ku darnay utility margin negative ee cabbir kasta oo aan eber ahayn ee kor ku taxan (tusaale, 1, 2, 3, 4, 5). Tasiilaadkani waxay ku fiican yihiin in la habeeyo majaraha tiirarka tubbada ee meelaha jaban.

Syntax-ku wuxuu ku dhow yahay inuu la mid yahay kan caadiga ah, yutiilitiyada margin togan, laakiin marka lagu daro ka nhor cabbirka la codsaday. Waa kan tusaale tusaale ka soo horjeeda .mt-1:

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

Waa kuwan tusaale ku saabsan habaynta shabakada Bootstrap ee barta mdgoynta dhexe iyo ka sare. Waxaan ku kordhinay .colsuufka .px-md-5ka dibna ka hortagnay taas .mx-md-n5waalidka .row.

Tiirka gaarka ah

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