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

Equal Height Card Grids شبكات البطاقات متساوية الطول

أتقن بناء البطاقات في بوتستراب 5.3 من تشريح الرأس والجسم والتذييل وصور البطاقات والنص المتراكب إلى البطاقات الأفقية وشبكات الارتفاع المتساوي والرابط الممتد.
2 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

من أشهر التحديات العملية في تصميم شبكات المنتجات تفاوت ارتفاع البطاقات المتجاورة عندما يطول الوصف في بطاقة ويقصر في أخرى! يحل Bootstrap 5.3 هذه المشكلة بلمسة سحرية واحدة: أضف الكلاس .h-100 على كل عنصر .card داخل أعمدة .row-cols-1 .row-cols-md-3 .g-4 لتتمدد جميع بطاقات الصف بنفس الارتفاع، وضع .mt-auto على زر الإجراء ليلتصق بقاع البطاقة دائماً!

الصف 2 كود برمجي
HTML 
<div class="row row-cols-1 row-cols-md-2 g-3">
  <div class="col">
    <div class="card h-100 p-3">Short card</div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">Longer card text.</div>
    </div>
  </div>
</div>
جرّب بنفسك

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