यह एक लोकप्रिय बूटस्ट्रैप प्रश्न है, इसलिए मैंने बूटस्ट्रैप 3 और बूटस्ट्रैप 4 के उत्तर को अपडेट और विस्तारित किया है ...
बूटस्ट्रैप 3 " ऊंचाई समस्या " होती है क्योंकि स्तंभों का उपयोग float:left
। जब एक कॉलम "फ्लोट" किया जाता है, तो इसे दस्तावेज़ के सामान्य प्रवाह से बाहर निकाल दिया जाता है। इसे बाईं या दाईं ओर तब तक स्थानांतरित किया जाता है जब तक कि यह इसके बॉक्स के किनारे को स्पर्श न कर ले। इसलिए, जब आपके पास असमान स्तंभ ऊंचाइयां होती हैं , तो सही व्यवहार उन्हें निकटतम पक्ष में ढेर करना है।
नोट : नीचे दिए गए विकल्प कॉलम रैपिंग परिदृश्यों के लिए लागू होते हैं, जहां एकल में 12 से अधिक कॉल यूनिट होते हैं.row
। उन पाठकों के लिए जो यह नहीं समझते कि कभी एक पंक्ति में 12 से अधिक कॉल क्यों होंगे , या यह सोचें कि समाधान को "अलग पंक्तियों का उपयोग करें" यह पहले पढ़ना चाहिए
इसे ठीक करने के कुछ तरीके हैं .. (2018 के लिए अद्यतन)
1 - 'क्लीयरफिक्स' दृष्टिकोण ( बूटस्ट्रैप द्वारा अनुशंसित ) इस तरह (हर एक्स कॉलम की पुनरावृत्ति की आवश्यकता है )। यह हर X संख्या के कॉलम को लपेटने के लिए बाध्य करेगा ...
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
क्लियरफिक्स डेमो (सिंगल टियर)
क्लीयरफिक्स डेमो (उत्तरदायी टियर्स) - जैसे।col-sm-6 col-md-4 col-lg-3
टेबल्स के साथ 'क्लियरफिक्स' सीएसएस-ओनली क्लियरफिक्स की सीएसएस-केवल भिन्नता भी है
2 - कॉलम को समान ऊंचाई (फ्लेक्सबॉक्स का उपयोग करके) बनाएं:
चूंकि समस्या ऊंचाई में अंतर के कारण होती है , इसलिए आप प्रत्येक पंक्ति में स्तंभों को समान ऊँचाई पर बना सकते हैं । Flexbox यह करने का सबसे अच्छा तरीका है, और मूल रूप से बूटस्ट्रैप 4 में समर्थित है ...
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
फ्लेक्सबॉक्स बराबर ऊंचाई डेमो
3 - स्तंभों को इन-ब्लॉक-इन-ब्लॉक के बजाय अन-फ्लोट करें।
फिर से, ऊंचाई की समस्या केवल इसलिए होती है क्योंकि स्तंभ फ्लोट किए जाते हैं। एक अन्य विकल्प कॉलम को display:inline-block
और सेट करना है float:none
। यह ऊर्ध्वाधर-संरेखण के लिए अधिक लचीलापन भी प्रदान करता है। हालांकि, इस समाधान के साथ कॉलम के बीच कोई HTML व्हाट्सएप नहीं होना चाहिए , अन्यथा इनलाइन-ब्लॉक तत्वों में अतिरिक्त स्थान है और समय-समय पर लपेटा जाएगा।
इनलाइन ब्लॉक फिक्स का डेमो
4 - CSS3 कॉलम दृष्टिकोण (समाधान की तरह चिनाई / Pinterest) ।।
यह बूटस्ट्रैप 3 का मूल नहीं है, लेकिन सीएसएस मल्टी-कॉलम का उपयोग करते हुए एक और तरीका है । इस दृष्टिकोण के लिए एक नकारात्मक पक्ष यह है कि कॉलम ऑर्डर बाएं-से-दाएं के बजाय ऊपर से नीचे है। बूटस्ट्रैप 4 में इस प्रकार का समाधान शामिल है :
बूटस्ट्रैप 4 चिनाई कार्ड डेमो ।
बूटस्ट्रैप 3 मल्टी-कॉलम डेमो
5 - चिनाई जावास्क्रिप्ट / jQuery दृष्टिकोण
अंत में, आप आइसोटोप / चिनाई जैसे एक प्लगइन का उपयोग करना चाहते हैं:
बूटस्ट्रैप चिनाई डेमो
चिनाई डेमो 2
बूटस्ट्रैप वैरिएबल हाइट कॉलम पर अधिक
अपडेट 2018
सभी कॉलम बूटस्ट्रैप 4 में समान ऊंचाई के हैं क्योंकि यह डिफ़ॉल्ट रूप से फ्लेक्सबॉक्स का उपयोग करता है, इसलिए "ऊंचाई का मुद्दा" कोई समस्या नहीं है। इसके अतिरिक्त, बूटस्ट्रैप 4 में इस प्रकार के बहु-स्तंभ समाधान शामिल हैं:
बूटस्ट्रैप 4 चिनाई कार्ड डेमो ।