الفواصل الرأسية بكلاس gy | الفراغات الفاصلة Gutters في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في الصفوف المتجاوبة التي تلتف أعمدتها إلى عدة أسطر (مثل أربع بطاقات بحجم .col-6 تشكل سطرين)، لا يوجد افتراضياً تباعد رأسي بين السطر الأول والسطر الثاني لأن --bs-gutter-y يبدأ من الصفر. تمنحك كلاسات .gy-1 حتى .gy-5 فاصلاً رأسياً أنيقاً ومتناسقاً بين الأسطر الملتفة داخل نفس الصف دون الحاجة لإضافة هوامش سفلية يدوية لكل بطاقة.

الصف 2 كود برمجي

HTML

<div class="container overflow-hidden">
  <div class="row gy-4">
    <div class="col-6"><div>Box 1</div></div>
    <div class="col-6"><div>Box 2</div></div>
    <div class="col-6"><div>Box 3</div></div>
    <div class="col-6"><div>Box 4</div></div>
  </div>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Vertical gy Gutters الفواصل الرأسية بكلاس gy

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الفراغات الفاصلة Gutters في بوتستراب 5)