واټن

بوټسټریپ کې د شارټ هینډ ځواب ویونکي مارجین او پیډینګ یوټیلټي ټولګیو پراخه لړۍ شامله ده ترڅو د عنصر بڼه بدله کړي.

څنګه کار کوي

ځواب ورکوونکي دوستانه marginیا paddingارزښتونه یو عنصر یا د هغې د اړخونو فرعي سیټ ته د لنډ لاسي ټولګیو سره وټاکئ. د انفرادي ملکیتونو، ټول ملکیتونو، او عمودی او افقی ملکیتونو لپاره ملاتړ شامل دی. ټولګي د ډیفالټ Sass نقشې څخه .25remتر 3rem.

یادښت

د فاصلې اسانتیاوې چې په ټولو بریک پوائنټونو کې پلي کیږي ، له څخه xsتر xl، په دوی کې د وقفې نقطې لنډیز نشته. دا ځکه چې دا ټولګي له min-width: 0پورته او پورته څخه پلي کیږي، او پدې توګه د رسنیو پوښتنې پورې تړلي ندي. په هرصورت، پاتې وقفې د وقفې نقطې لنډیز شامل دي.

ټولګیو ته د , , , and {property}{sides}-{size}for format په کارولو سره نوم ورکول کیږي .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

چیرې چې ملکیت یو له دې څخه دی:

• m- د ټولګیو لپاره چې ټاکل شويmargin
• p- د ټولګیو لپاره چې ټاکل شويpadding

چیرته چې یو اړخ دی:

• t- د ټولګیو لپاره چې تنظیم شوي margin-topیاpadding-top
• b- د ټولګیو لپاره چې تنظیم شوي margin-bottomیاpadding-bottom
• l- د ټولګیو لپاره چې تنظیم شوي margin-leftیاpadding-left
• r- د ټولګیو لپاره چې تنظیم شوي margin-rightیاpadding-right
• x- د ټولګیو لپاره چې دواړه *-leftاو ترتیبوي*-right
• y- د ټولګیو لپاره چې دواړه *-topاو ترتیبوي*-bottom
• خالي - د ټولګیو لپاره چې د marginعنصر paddingپه ټولو 4 اړخونو کې تنظیموي

چیرې چې اندازه یو له دې څخه دی:

• 0- د هغو ټولګیو لپاره چې له منځه یوسي marginیا paddingیې ترتیب کړي0
• 1- (د ډیفالټ په واسطه) د ټولګیو لپاره چې marginیا paddingیې تنظیموي$spacer * .25
• 2- (د ډیفالټ په واسطه) د ټولګیو لپاره چې marginیا paddingیې تنظیموي$spacer * .5
• 3- (د ډیفالټ په واسطه) د ټولګیو لپاره چې marginیا paddingیې تنظیموي$spacer
• 4- (د ډیفالټ په واسطه) د ټولګیو لپاره چې marginیا paddingیې تنظیموي$spacer * 1.5
• 5- (د ډیفالټ په واسطه) د ټولګیو لپاره چې marginیا paddingیې تنظیموي$spacer * 3
• auto- د هغو ټولګیو لپاره چې په marginاتومات ډول تنظیموي

$spacers(تاسو کولی شئ د ساس نقشې متغیر ته د ننوتلو په اضافه کولو سره نور اندازې اضافه کړئ .)

مثالونه

دلته د دې ټولګیو ځینې نمایشي مثالونه دي:

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

افقی مرکز کول

برسیره پردې، بوټسټریپ کې .mx-autoد افقی پلوه د ټاکل شوي چوکۍ بلاک کچې مینځپانګې مینځپانګې لپاره یو ټولګی هم شامل دی - دا هغه مینځپانګه چې لري display: blockاو یو widthسیټ - د افقی حاشیو په ترتیب کولو سره auto.

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

منفي حاشیه

په CSS کې، marginملکیت کولی شي منفي ارزښتونه وکاروي ( paddingنشي کولی). تر 4.2 پورې، موږ د هر غیر صفر عددي اندازې لپاره د منفي حاشیې اسانتیاوې اضافه کړې چې پورته لیست شوي دي (د مثال په توګه، 1, 2, 3, 4, 5). دا اسانتیاوې د بریک پوائنټونو په اوږدو کې د ګریډ کالم ګټرونو تنظیم کولو لپاره غوره دي.

نحو تقریبا د ډیفالټ ، مثبت حاشیې اسانتیاو سره ورته دی ، مګر nد غوښتل شوي اندازې دمخه اضافه کولو سره. دلته یو مثال ټولګی دی چې مخالف دی .mt-1:

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

mdدلته په منځني ( ) بریک پواینټ او پورته کې د بوټسټریپ گرډ دودیز کولو مثال دی . موږ .colپیډینګ د مور او پلار .px-md-5سره ډیر کړی او بیا یې مقابله کړې ده ..mx-md-n5.row

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