انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: محاذاة وترتيب الأعمدة في بوتستراب 5

Horizontal Column Alignment التوزيع الأفقي للأعمدة

التحكم المتقدم بأعمدة شبكة بوتستراب 5: المحاذاة الرأسية والأفقية، كسر السطر بـ w-100، الترتيب البصري order، الإزاحة المنطقية offset، والأعمدة المنفردة.
3 صفوف تعليمية
بوتستراب 5
0 مشاهدة

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

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

عندما يكون مجموع وحدات الأعمدة داخل الصف أقل من 12 وحدة (مثل عمودين بحجم .col-4 مجموعهما 8 وحدات فقط)، يتبقى فراغ أفقي قدره 4 وحدات. يمكنك التحكم في توزيع هذا الفراغ بإضافة أحد كلاسات المحور الأفقي على عنصر .row: مثل .justify-content-start، أو .justify-content-center للتوسيط، أو .justify-content-end، أو .justify-content-around، أو .justify-content-between، أو .justify-content-evenly.

الصف 2 كود برمجي
HTML 
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">Centered A</div>
    <div class="col-4">Centered B</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">Start Edge</div>
    <div class="col-4">End Edge</div>
  </div>
</div>
جرّب بنفسك
الصف 3 ملاحظة هامة

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