विभिन्न ऊंचाई के स्तंभों के साथ बूटस्ट्रैप पंक्ति


91

वर्तमान में मेरे पास कुछ ऐसा है:

<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="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

अब यह मानते हुए कि, contentसभी समान चौड़ाई के साथ, अलग-अलग ऊंचाई के बक्से थे - मैं एक ही "ग्रिड आधारित लेआउट" कैसे रख सकता था और अभी तक सभी बॉक्स एक दूसरे के नीचे, सही लाइनों के बजाय लाइन में हैं।

वर्तमान में TWBS col-md-4पिछली तीसरी पंक्ति में सबसे लंबे तत्व के तहत अगली पंक्ति को स्थान देगा । इस प्रकार, प्रत्येक पंक्ति पूरी तरह से एक स्वच्छ संरेखित होती है - जबकि यह भयानक है मैं चाहता हूं कि प्रत्येक आइटम सीधे अंतिम तत्व ("चिनाई") के तहत गिर जाए )

जवाबों:


172

यह एक लोकप्रिय बूटस्ट्रैप प्रश्न है, इसलिए मैंने बूटस्ट्रैप 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 चिनाई कार्ड डेमो


यहाँ बूटस्ट्रैप v4-alpha.getbootstrap.com/layout/grid में वर्टिकल अलाइनमेंट पर एक अच्छी गाइडलाइन है । विशेष रूप से ऊर्ध्वाधर संरेखण और वर्ग "पंक्ति संरेखित-आइटम-प्रारंभ"
जोश

2
WOOW! आप इस bootply.com/120682 के लिए मेरा वोट अर्जित करें । चिनाई प्लगइन के साथ, यह स्क्रीन लोड पर अच्छा नहीं लगता है जब आप स्क्रीन की चौड़ाई को समायोजित करने के लिए खींचें
पॉलो

11

किसी कारण से यह मेरे लिए .display-flex क्लास के बिना काम करता है

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

इसने मेरे लिए काम किया। केवल मैंने दूसरी css टू .col प्रॉपर्टी डाल दी
रोहितअनेजा

0

मैंने बूटस्ट्रैप पंक्ति में एक और एक्सटेंशन (जो प्रतिक्रियाशील भी है) बनाया। आप कुछ इस तरह की कोशिश कर सकते हैं:

.row.flexRow { display: flex; flex-wrap: wrap;}

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.