ناودان

ناودان ها بالشتک بین ستون های شما هستند که برای ایجاد فاصله پاسخگو و تراز کردن محتوا در سیستم شبکه بوت استرپ استفاده می شوند.

در این صفحه

چگونه کار می کنند

ناودان ها شکاف های بین محتوای ستون هستند که توسط افقی ایجاد می شوند padding. روی هر ستون تنظیم می کنیم padding-rightو padding-leftاز منفی استفاده می marginکنیم تا آن را در ابتدا و انتهای هر سطر جبران کنیم تا محتوا را تراز کنیم.
ناودان ها از عرض 1.5rem( 24px) شروع می شوند. این به ما امکان می‌دهد تا شبکه خود را با مقیاس فاصله‌دهنده‌های بالشتک و حاشیه مطابقت دهیم.
ناودان ها را می توان به صورت پاسخگو تنظیم کرد. برای اصلاح ناودان های افقی، ناودان های عمودی و همه ناودان ها از کلاس های ناودانی مخصوص نقطه شکست استفاده کنید.

ناودان افقی

.gx-*از کلاس ها می توان برای کنترل عرض های افقی ناودان استفاده کرد. اگر از ناودان های بزرگتر نیز استفاده می شود تا از سرریز ناخواسته جلوگیری شود، ممکن است نیاز باشد که با استفاده از ابزار بالشتک منطبق، والد .containerیا والد تنظیم شوند. .container-fluidبه عنوان مثال، در مثال زیر ما padding را با .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انتهای صفحه ایجاد کنند. اگر این اتفاق افتاد، یک wrapper در اطراف کلاس اضافه .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کلاس wrapper نخواهد بود.

پر کردن ستون سفارشی

<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. این margins های منفی را از .rowو افقی را paddingاز تمام ستون های فرزند فوری حذف می کند.

به طراحی لبه به لبه نیاز دارید؟ والد .containerیا .container-fluid.

در عمل، در اینجا چگونه به نظر می رسد. توجه داشته باشید که می‌توانید به استفاده از آن با سایر کلاس‌های شبکه از پیش تعریف‌شده (از جمله عرض ستون، ردیف‌های پاسخ‌گو، ترتیب‌های مجدد و موارد دیگر) ادامه دهید.

.col-sm-6 .col-md-8

.col-6 .col-md-4

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

ناودان ها را عوض کنید

کلاس ها از نقشه Sass ساخته می شوند که از $guttersنقشه Sass به ارث رسیده است $spacers.

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