شرح صفوف ومحتوى الفقرة
ماذا لو أردت أن تظل الحاوية ممتدة بعرض كامل 100% ليس على الهواتف فحسب، بل على الأجهزة اللوحية md أيضاً، ولا تبدأ بالتوسيط وتقييد العرض إلا بدءاً من شاشات المحمول lg عند 992px فأكثر؟ هنا تتألق الحاويات المتجاوبة المرحلية (.container-md و .container-lg و .container-xl و .container-xxl) دون كتابة سطر استعلام وسائط واحد!
القاعدة الذهبية للحفظ: الكلاس .container-{bp} يعمل بعرض 100% تحت نقطة التوقف المذكورة في اسمه، ويتحول إلى حاوية مقيدة العرض ومتمركزة بدءاً من تلك النقطة فصاعداً.
HTML
<div class="container-md c-box">
.container-md: 100% below 768px, 720px+ from md up
</div>
<div class="container-lg c-box">
.container-lg: 100% below 992px, 960px+ from lg up
</div>
<div class="container-xl c-box">
.container-xl: 100% below 1200px, 1140px+ from xl up
</div>