Source

واټن

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

څنګه کار کوي

ځواب ورکوونکي دوستانه 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>