Bootstrap 4: عناصر شريط التنقل المستمرة خارج الحاوية المطوية

يمكن أن يكون التنقل في موقع ويب محبطًا عندما تختفي الروابط المهمة، مثل أيقونات الوسائط الاجتماعية، عندما ينهار شريط التنقل على مساحة أصغر شاشات. لحسن الحظ، يقدم Bootstrap 4 حلاً أنيقًا لإبقاء بعض عناصر شريط التنقل مرئية حتى عند طي القائمة.

مشكلة

تنشأ المشكلة عندما يتم ضبط شريط التنقل على الانهيار عندما يصبح عرض الشاشة ضيقًا . يتم التحكم في هذا السلوك بواسطة فئة .collapse. بشكل افتراضي، تكون جميع العناصر الموجودة في حاوية .collapse مخفية عند تنشيط الطي.

الحل

للحيلولة دون اختفاء عناصر معينة في شريط التنقل مع الطي، ما عليك سوى نقلها خارج حاوية .collapse . يمكن تحقيق ذلك باستخدام فئات الأداة المساعدة order-* لضبط ترتيب flexbox للعناصر.

مثال الكود

في هذا المثال، تم وضع أيقونات الوسائط الاجتماعية داخل حاوية خارج عنصر .collapse. تضمن فئتا d-flex وorder-* بقاء الرموز في الترتيب والموضع الصحيحين عند طي شريط التنقل.