کانیاوەکان

کانیاوەکان بریتین لە پادکردنی نێوان ستوونەکانت، بەکاردێت بۆ ئەوەی بە شێوەیەکی وەڵامدەرەوە شوێن و ڕێکخستنی ناوەڕۆک لە سیستەمی تۆڕی 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,
);