ناودان
ناودان ها بالشتک بین ستون های شما هستند که برای ایجاد فاصله پاسخگو و تراز کردن محتوا در سیستم شبکه بوت استرپ استفاده می شوند.
چگونه کار می کنند
-
ناودان ها شکاف های بین محتوای ستون هستند که توسط افقی ایجاد می شوند
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
. این 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>
ناودان ها را عوض کنید
کلاس ها از نقشه 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,
);