बूटस्ट्रैप 3 पूर्ण-ऊंचाई कॉलम: एक कस्टम सीएसएस समाधान

परिचय:

बनाना ट्विटर बूटस्ट्रैप 3 के साथ पूर्ण-ऊंचाई वाले लेआउट चुनौतीपूर्ण हो सकते हैं। जबकि बूटस्ट्रैप की मूल कक्षाएं इस सुविधा का समर्थन नहीं करती हैं, कस्टम सीएसएस का उपयोग करके इस प्रभाव को प्राप्त करना संभव है।

कस्टम सीएसएस दृष्टिकोण:

1. सेटिंग 100% ऊंचाई:
   सुनिश्चित करने के लिए बॉडी, कंटेनर और पंक्ति तत्वों की ऊंचाई 100% पर सेट करें कि वे व्यूपोर्ट की पूरी ऊंचाई तक फैले हैं।
2. एक तालिका के रूप में प्रदर्शित करना:
   प्रदर्शन: तालिका का उपयोग करके कंटेनर तत्व को एक तालिका में परिवर्तित करें। यह कंटेनर की सामग्री को एक सारणीबद्ध संरचना में व्यवस्थित करने की अनुमति देता है।
3. फ्लोटिंग सेल:
   नेविगेशन कॉलम में एक कस्टम क्लास, जैसे नो-फ्लोट, जोड़ें। इस क्लास को डिस्प्ले: टेबल-सेल और फ्लोट: कोई नहीं पर सेट करें। यह नेविगेशन कॉलम को तैरने से रोकेगा और इसे सामग्री कॉलम के साथ लंबवत रूप से संरेखित करने की अनुमति देगा।

मार्कअप:

Header

    

        
Navigation
        
Content
    

सीएसएस:

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;
}

फायदे और विचार:

• यह कस्टम सीएसएस समाधान एक पूर्ण-ऊंचाई वाला लेआउट प्रदान करता है जो बूटस्ट्रैप 3 के साथ संगत है।
• सीएसएस में कॉलम की चौड़ाई को संशोधित करके नेविगेशन और सामग्री के 1:3 अनुपात को समायोजित किया जा सकता है।
• हालांकि, विरोध से बचने के लिए बूटस्ट्रैप के मूल कॉलम वर्गों को संशोधित करने के बजाय कस्टम क्लास (उदाहरण के लिए, नो-फ्लोट) का उपयोग करना महत्वपूर्ण है।