کانیاوەکان

کانیاوەکان بریتین لە پادکردنی نێوان ستوونەکانت، بەکاردێت بۆ ئەوەی بە شێوەیەکی وەڵامدەرەوە شوێن و ڕێکخستنی ناوەڕۆک لە سیستەمی تۆڕی Bootstrap دا.

لەم پەیجەدا

چۆن کاردەکەن

کانیاوەکان بۆشاییەکانی نێوان ناوەڕۆکی ستوونەکانن، کە لەلایەن ئاسۆییەوە دروست دەکرێن padding. ئێمە padding-rightو padding-leftلەسەر هەر ستوونێک دادەنێین، و نەرێنی بەکاردەهێنین marginبۆ ئۆفسێتکردنی ئەوەی لە سەرەتا و کۆتایی هەر ڕیزێکدا بۆ ڕێکخستنی ناوەڕۆک.
کانیاوەکان لە 1.5rem( 24px) پان دەست پێدەکەن. ئەمەش ڕێگەمان پێدەدات تۆڕەکەمان لەگەڵ پێوەرەکەی پادکردن و فەواصلی پەراوێزدا بگونجێنین .
دەتوانرێت کانیاوەکان بە شێوەیەکی وەڵامدەرەوە ڕێکبخرێن. پۆلەکانی کانیاوی تایبەت بە خاڵی شکاندن بەکاربهێنە بۆ دەستکاریکردنی کانییە ئاسۆییەکان، کانییە ڕاستەکان و هەموو کانیاوەکان.

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

.gx-*دەتوانرێت پۆلەکان بەکاربهێنرێت بۆ کۆنترۆڵکردنی پاناییەکانی کانیاوی ئاسۆیی. لەوانەیە پێویستی بە ڕێکخستن بێت ئەگەر کانی گەورەتر بەکاربهێنرێت بۆ ئەوەی ڕژانی نەخوازراو ڕوونەدات، بە بەکارهێنانی سوودمەندی پادکردنی هاوتا .container. .container-fluidبۆ نموونە لەم نموونەیەی خوارەوەدا پادکردنەکەمان زیاد کردووە بە .px-4:

پادکردنی ستوونی تایبەت بەخۆت

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

چارەسەرێکی بەدیل ئەوەیە کە پێچێک لە دەوری .rowلەگەڵ .overflow-hiddenپۆلەکەدا زیاد بکەیت:

پادکردنی ستوونی تایبەت بەخۆت

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

کانیاوەکانی ڕاست

.gy-*دەتوانرێت پۆلەکان بەکاربهێن��ێت بۆ کۆنترۆڵکردنی پاناییەکانی کانیاوی ڕاست. وەکو کانییە ئاسۆییەکان، کانییە ڕاستەکان دەتوانن ببنە هۆی هەندێک ڕژان لە خوار .rowلە کۆتایی لاپەڕەیەکدا. ئەگەر ئەمە ڕوویدا، تۆ پێچێک زیاد دەکەیت بە دەوری .rowلەگەڵ .overflow-hiddenپۆلەکەدا:

پادکردنی ستوونی تایبەت بەخۆت

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

کانیاوەکانی ئاسۆیی و ڕاست

.g-*دەتوانرێت پۆلەکان بەکاربهێنرێت بۆ کۆنترۆڵکردنی پاناییەکانی کانیاوی ئاسۆیی، بۆ ئەم نموونەیەی خوارەوە ئێمە پانایی کانیاوێکی بچووکتر بەکاردەهێنین، بۆیە پێویست بە زیادکردنی .overflow-hiddenپۆلی پێچان ناکات.

پادکردنی ستوونی تایبەت بەخۆت

<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

ڕیز ستوونەکان کانیاوەکان

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

ستوونی ڕیز

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

بێ کانیاو

دەتوانرێت بە .g-0. marginئەمەش s ی نەرێنی لە هەموو ستوونەکانی منداڵانی دەستبەجێ .rowو ئاسۆیی لە هەموو ستوونەکانی منداڵان لا دەبات.padding

پێویستت بە دیزاینێکی لێوار بۆ لێوار هەیە؟ دایک و باوکەکە .containerیان .container-fluid.

لە پراکتیکدا، لێرەدا چۆن دەردەکەوێت. تێبینی دەتوانیت بەردەوام بیت لە بەکارهێنانی ئەمە لەگەڵ هەموو پۆلەکانی تری تۆڕی پێشوەختە پێناسەکراو (لەوانەش پانایی ستوونەکان، قاتەکانی وەڵامدەرەوە، ڕێکخستنەوە و زۆر شتی تر).

.کۆل-سم-٦ .کۆل-مد-٨

.کۆل-٦ .کۆل-مد-٤

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

کانیاوەکان بگۆڕە

پۆلەکان لە نەخشەی ساسەوە دروست دەکرێن کە لە $guttersنەخشەی ساسەوە بۆماوە $spacers.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);