دووری کردن

بووتستراپ کۆمەڵێک پۆلی سوودمەندی پەراوێزی وەڵامدانەوەی کورتکراوە و پادکردن لەخۆدەگرێت بۆ دەستکاریکردنی دەرکەوتنی توخمێک.

چۆن کاردەکات

وەڵامدەرەوە-دۆست marginیان paddingبەهاکان بۆ توخمێک یان ژێرکۆمەڵێک لە لایەنەکانی بە پۆلەکانی کورتکراوە دیاری بکە. پشتگیری بۆ تایبەتمەندییە تاکەکەسییەکان، هەموو تایبەتمەندییەکان، و تایبەتمەندییە ڕاست و ئاسۆییەکان لەخۆدەگرێت. پۆلەکان لە نەخشەی پێشوەختەی Sass دروست دەکرێن کە لە .25remتا 3rem.

نووسین

سوودمەندیەکانی دووری کە بۆ هەموو خاڵەکانی شکاندن دەگونجێت، لە xsبۆ xl، هیچ کورتکراوەیەکی خاڵی شکاندنیان تێدا نییە. ئەمەش لەبەر ئەوەیە کە ئەو پۆلانە لە min-width: 0سەرەوە و سەرەوە جێبەجێ دەکرێن، و بەم شێوەیە بە پرسیارێکی میدیاییەوە بەستراو نین. بەڵام خاڵە شکاندنەکانی دیکە کورتکراوەی خاڵەکانی شکاندن لەخۆدەگرن.

ناو پۆلەکان بە بەکارهێنانی فۆرمات {property}{sides}-{size}بۆ xsو {property}{sides}-{breakpoint}-{size}بۆ sm, md, lg, و xl.

لە کوێدا موڵک یەکێکە لە:

• 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
• blank - بۆ ئەو پۆلانەی کە a 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- بۆ ئەو پۆلانەی کە marginto auto دادەنێن

(دەتوانیت قەبارەی زیاتر زیاد بکەیت بە زیادکردنی نووسراوەکان بۆ $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;
}

ناوەندکردنی ئاسۆیی

سەرەڕای ئەوە، Bootstrap هەروەها .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;
}

لێرەدا نموونەیەک لە خۆکارکردنی تۆڕی Bootstrap لە mdخاڵی شکاندنی مامناوەند ( ) و سەرووتر دەخەینەڕوو. ئێمە پادکردنمان زیاد کردووە .colلەگەڵ .px-md-5و پاشان بەرپەرچی ئەوەمان داوەتەوە لەگەڵ .mx-md-n5لەسەر دایک و باوک .row.

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