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

Equal Auto Width Columns الأعمدة المتساوية التلقائية

إتقان نظام الشبكة ذي 12 عموداً في بوتستراب 5: تسلسل الحاوية والصف والعمود، الأعمدة المتساوية والرقمية والمتكيفة، الطبقات المتجاوبة، row-cols، وتداخل الشبكات.
2 صفوف تعليمية
بوتستراب 5
2 مشاهدة

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

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

عندما تحتاج إلى تقسيم الصف بالتساوي دون الانشغال بحساب الأرقام، استخدم الكلاس المجرد .col على كل عمود. يمنح بوتستراب كل عنصر يحمل .col قاعدة flex: 1 0 0%، فيتقاسم الأبناء عرض الصف بنسبة متطابقة تماماً: عمودان يأخذ كل منهما 50%، وثلاثة أعمدة يأخذ كل منها 33.33%، وحتى خمسة أعمدة تتوزع بنسبة 20% لكل عمود (وهو أمر لم يكن ممكناً بالقسمة الرقمية على 12 بمفردها!).

الصف 2 كود برمجي
HTML 
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<div class="row">
  <div class="col">1 of 3</div>
  <div class="col">2 of 3</div>
  <div class="col">3 of 3</div>
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (النظام الشبكي في بوتستراب 5)