التمدد النسبي مقابل التساوي | قوائم التنقل Navs في بوتستراب 5

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

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

يوفر بوتستراب 5 كلاسين لتمديد عناصر التنقل على كامل عرض الحاوية الأب بنسبة 100%، غير أن معادلتهما الهندسية تختلف جوهرياً:

التمدد النسبي عبر .nav-fill — يمنح كل عنصر خاصية flex: 1 1 auto فيوزع الفراغ المتبقي نسبياً، مما يجعل الرابط ذا العنوان الطويل أعرض من الرابط القصير.
التساوي الصارم عبر .nav-justified — يضبط الأساس المرن على flex-basis: 0 مع flex-grow: 1، فيفرض عرضاً متطابقاً بالبكسل على جميع العناصر مهما تباينت أطوال كلماتها.

الصف 2 صورة توضيحية

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

HTML

<nav class="nav nav-justified bg-body-tertiary p-2 rounded">
  <a class="nav-link active" href="#">All</a>
  <a class="nav-link" href="#">Enterprise Solutions</a>
  <a class="nav-link" href="#">API</a>
</nav>

جرّب بنفسك

الصف 4 معاينة حية

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

Fill vs Justified Navs التمدد النسبي مقابل التساوي

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

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