Mipata

Bootstrap imaphatikizapo magawo angapo omvera amfupi komanso makalasi othandizira kuti asinthe mawonekedwe a chinthu.

Momwe zimagwirira ntchito

Perekani zovomerezeka marginkapena paddingzofunikira ku chinthu kapena kagawo kakang'ono ka mbali zake ndi makalasi achidule. Zimaphatikizapo chithandizo cha katundu aliyense payekha, katundu yense, ndi zowoneka ndi zopingasa. Maphunziro amapangidwa kuchokera pamapu okhazikika a Sass kuyambira .25remmpaka 3rem.

Kuzindikira

Zida zopangira masitayilo zomwe zimagwira ntchito pama breakpoints onse, kuyambira xsmpaka xl, zilibe chidule cha breakpoint mwa iwo. Izi ndichifukwa choti makalasiwo amagwiritsidwa ntchito kuchokera min-width: 0ndi mmwamba, motero samamangidwa ndi funso lazama media. Zotsalira zotsalira, komabe, zikuphatikiza chidule cha breakpoint.

Maphunzirowa amatchulidwa pogwiritsa ntchito mawonekedwe {property}{sides}-{size}a xs, , , ndi .{property}{sides}-{breakpoint}-{size}smmdlgxl

Kumene katundu ndi imodzi mwa:

m- kwa makalasi omwe akhazikitsidwamargin
p- kwa makalasi omwe akhazikitsidwapadding

Kumene mbali ndi imodzi mwa:

t- kwa makalasi omwe amakhazikitsa margin-topkapenapadding-top
b- kwa makalasi omwe amakhazikitsa margin-bottomkapenapadding-bottom
l- kwa makalasi omwe amakhazikitsa margin-leftkapenapadding-left
r- kwa makalasi omwe amakhazikitsa margin-rightkapenapadding-right
x- kwa makalasi omwe amakhazikitsa onse *-leftndi*-right
y- kwa makalasi omwe amakhazikitsa onse *-topndi*-bottom
opanda kanthu - m'makalasi omwe amayika mbali marginzonse paddingzinayi za chinthucho

Kumene kukula ndi chimodzi mwa:

0- m'makalasi omwe amachotsa marginkapena paddingkuyiyika0
1- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * .25
2- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * .5
3- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer
4- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * 1.5
5- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * 3
auto- pamakalasi omwe amakhazikitsa marginauto

(Mutha kuwonjezera kukula kwake powonjezera zolemba $spacerspamapu a Sass.)

Zitsanzo

Nazi zitsanzo zoimira makalasi awa:

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

Chopingasa pakati

Kuphatikiza apo, Bootstrap imaphatikizansopo .mx-autokalasi yokhazikika yopingasa mulingo wa block - ndiye kuti, zomwe zili display: blockndi widthseti - pokhazikitsa malire opingasa mpaka auto.

Chigawo chapakati

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

Mtsinje wopanda pake

Mu CSS, marginkatundu amatha kugwiritsa ntchito zinthu zolakwika ( paddingsangathe). Pofika pa 4.2, tawonjeza zosokoneza pamtundu uliwonse wopanda ziro womwe watchulidwa pamwambapa (mwachitsanzo, 1, 2, 3, 4, 5). Zothandizira izi ndizoyenera kusintha ma grid column gutters kudutsa ma breakpoints.

Mawuwo ali pafupifupi ofanana ndi osasinthika, abwino am'mphepete mwazinthu zofunikira, koma ndikuwonjezera nkukula kwake komwe kusanachitike. Nayi kalasi yachitsanzo yomwe ili yosiyana ndi .mt-1:

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

Nachi chitsanzo chakusintha grid ya Bootstrap pakatikati ( md) breakpoint ndi pamwambapa. Tawonjeza .colpadding ndi .px-md-5kenako kutsutsana ndi .mx-md-n5pa kholo .row.

Custom column padding

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