دووری کردن
بووتستراپ کۆمەڵێک پۆلی سوودمەندی پەراوێزی وەڵامدانەوەی کورتکراوە و پادکردن لەخۆدەگرێت بۆ دەستکاریکردنی دەرکەوتنی توخمێک.
چۆن کاردەکات
وەڵامدەرەوە-دۆست 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
- بۆ ئەو پۆلانەی کەmargin
to 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 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>