أعمدة Bootstrap 3 كاملة الارتفاع: حل CSS مخصص

مقدمة:

الإنشاء يمكن أن تشكل التخطيطات كاملة الارتفاع باستخدام Twitter Bootstrap 3 تحديًا. على الرغم من أن فئات Bootstrap الأصلية لا تدعم هذه الميزة، فمن الممكن تحقيق هذا التأثير باستخدام CSS مخصص.

نهج CSS المخصص:

1. الإعداد ارتفاع 100%:
   اضبط ارتفاع الجسم والحاوية وعناصر الصف على 100% للتأكد من أنها تمتد إلى الارتفاع الكامل للنص منفذ العرض.
2. العرض كجدول:
   تحويل عنصر الحاوية إلى جدول باستخدام العرض: الجدول. يسمح هذا بترتيب محتويات الحاوية في بنية جدولية.
3. الخلية العائمة:
   أضف فئة مخصصة، مثل no-float، إلى عمود التنقل. قم بتعيين هذه الفئة بحيث يكون العرض: خلية الجدول والتعويم: لا شيء. سيؤدي هذا إلى منع عمود التنقل من التعويم والسماح له بالمحاذاة رأسيًا مع عمود المحتوى.

التوصيف:

Header

    

        
Navigation
        
Content
    

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

المزايا والاعتبارات:

يوفر حل CSS المخصص هذا تخطيطًا كامل الارتفاع متوافقًا مع Bootstrap 3.
يمكن تعديل نسبة التنقل إلى المحتوى بنسبة 1:3 عن طريق تعديل عرض الأعمدة في CSS.
• ومع ذلك، من المهم استخدام فئة مخصصة (على سبيل المثال، no-float) بدلاً من تعديل فئات الأعمدة الأصلية في Bootstrap لتجنب التعارض.