فاصله گذاری
ابزارهای فاصله گذاری که برای همه نقاط شکست، از xs تا xxl، اعمال می شوند، هیچ علامت اختصاری نقطه شکست در آنها وجود ندارد. این به این دلیل است که آن کلاسها از min-width: 0و بالاتر اعمال میشوند، و بنابراین توسط یک درخواست رسانه محدود نمیشوند. با این حال، نقاط شکست باقیمانده شامل یک مخفف نقطه شکست هستند.
مثال
کلاس ها با استفاده از فرمت {property}{sides}-{size}برای xsو {property}{sides}-{breakpoint}-{size}برای sm،،، mdو lgنامگذاری می xlشوند xxl.
جایی که ملک یکی از موارد زیر است:
m- برای کلاس هایی که مجموعهmarginp- برای کلاس هایی که مجموعهpadding
جایی که طرف ها یکی از موارد زیر است:
t- برای کلاس هایی که مجموعهmargin-topیاpadding-topb- برای کلاس هایی که مجموعهmargin-bottomیاpadding-bottoms- برای کلاس هایی که مجموعهmargin-leftیاpadding-lefte- برای کلاس هایی که مجموعهmargin-rightیاpadding-rightx- برای کلاس هایی که هر دو*-leftو*-righty- برای کلاس هایی که هر دو*-topو*-bottom- خالی - برای کلاس هایی که یک
marginیاpaddingدر هر 4 طرف عنصر را تنظیم می کنند
جایی که اندازه یکی از موارد زیر است: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11وauto
شکاف
هنگام استفاده از display: grid، می توانید از برنامه های gap کاربردی موجود در ظرف شبکه والد استفاده کنید. این می تواند باعث صرفه جویی در نیاز به افزودن ابزارهای حاشیه به آیتم های شبکه جداگانه شود (فرزندان یک صفحه نمایش: ظرف شبکه). ابزارهای Gap به طور پیش فرض پاسخگو هستند و از طریق API ابزارهای ما بر اساس $spacers نقشه Sass تولید می شوند.
<p>When using <code>display: grid</code>, you can make use of <code>gap </code>utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container). Gap utilities are responsive by default, and are generated via our utilities API, based on the <code>$spacers </code>Sass map.</p>
<div class="d-grid gap-3">
<div class="p-2 bg-body-tertiary border">Grid item 1</div>
<div class="p-2 bg-body-tertiary border">Grid item 2</div>
<div class="p-2 bg-body-tertiary border">Grid item 3</div>
</div>
