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

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

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

لزيادة أو تقليل المسافة الأفقية بين الأعمدة المتجاورة فقط دون المساس بالتباعد الرأسي، أضف أحد كلاسات .gx-0 حتى .gx-5 إلى عنصر الصف .row. وعند اختيار فواصل أفقية عريضة مثل .gx-5 (3rem)، تتجاوز الهوامش السالبة للصف حشو الحاوية القياسي (0.75rem)، لذا نضيف الكلاس .overflow-hidden إلى الحاوية الخارجية لمنع ظهور شريط تمرير أفقي غير مرغوب.

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

HTML

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
      <div>Custom column padding (gx-5)</div>
    </div>
    <div class="col">
      <div>Custom column padding (gx-5)</div>
    </div>
  </div>
</div>

جرّب بنفسك

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

Horizontal gx Gutters الفواصل الأفقية بكلاس gx

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

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