css - बूटस्ट्रैप ग्रिड सिस्टम नई लाइन अच्छी नहीं लगती है




twitter-bootstrap twitter-bootstrap-3 (3)

हाल ही में, मैंने कई छोटे तालिकाओं (1-5 प्रविष्टियों) को संपादित करने के लिए अपनी साइट पर एक व्यवस्थापक पृष्ठ बनाना शुरू किया। वे सभी एक पृष्ठ पर प्रदर्शित हुए, और तालिकाओं को एक div में नेस्ट किया गया:

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
    </div>
    ...
</div>

मैंने इसे छह तालिकाओं के साथ किया था, और यह इस तरह दिखता है जैसे कि उनके पास समान मात्रा में रिकॉर्ड हैं (एक तालिका एक काला ब्लॉक है):

अब जब पहली तालिका में एक और रिकॉर्ड होता है, तो पहली तालिका बड़ी होती है और इसलिए अंतिम पंक्ति को तीसरी पंक्ति में लपेटा जाता है:

मैं वास्तव में क्या हासिल करना चाहता हूं (यदि बूस्टर ग्रिड सिस्टम के साथ संभव है) यह है कि 6 वीं तालिका एक तीसरी पंक्ति से लिपटी नहीं है, लेकिन बस इस तरह से थोड़ा कम रखा गया है:

क्या यह संभव है कि किसी भी तरह से बूस्टर का उपयोग किया जाए या नहीं?

यह संस्करण भी स्वीकार्य होगा, लेकिन एक तालिका का उपयोग नहीं बल्कि एक उत्तरदायी लेआउटिंग ( EDIT : यह @Skelly के उत्तर का उपयोग करके प्राप्त किया गया था):

सलाह के लिए धन्यवाद!

अद्यतन करें

मुझे केवल पहले वांछित संस्करण को प्राप्त करने की एक संभावना का पता चला है: आप बस प्रति कॉलम एक डिव को परिभाषित करते हैं और सभी तत्वों (इस मामले की तालिकाओं में) को अंदर रखते हैं, इसलिए वे एक दूसरे पर भरोसा नहीं करते हैं।

ऐसा कुछ:

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
        <!--table 4-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
        <!--table 5-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 3-->
        <!--table 6-->
    </div>
</div>

आप इसे विभिन्न तरीकों से हल कर सकते हैं, जो आप उपयोग करना चाहते हैं और ब्राउज़र समर्थन की आवश्यकता पर निर्भर करता है।

ग्रिड: रेम्बो रास्ता
यदि आपको लगता है कि आपकी तालिका में पाँच से अधिक रिकॉर्ड नहीं होंगे, तो आप उन्हें सभी उपयुक्त न्यूनतम-चौड़ाई देने का प्रयास कर सकते हैं। निश्चित रूप से चीजों का सबसे सुरुचिपूर्ण नहीं है, हालांकि। ग्रिड: फ्लेक्सबॉक्स रास्ता
जैसा कि आप caniuse से देख सकते हैं, FlexBox के ब्राउज़र का समर्थन आजकल निश्चित रूप से खराब नहीं है। इसे कंटेनर तत्व पर सेट करके

.container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

और फिर बच्चों, या ग्रिड के तत्वों पर भी ऐसा ही कर रहे हैं, तो आप यह कर सकते हैं कि वे सभी उस बदसूरत सफेद स्थान को भरने के लिए खिंचाव करें, इस प्रकार एक और ग्रिड लेआउट को प्राप्त किए बिना ... असभ्य?

ग्रिड: जावास्क्रिप्ट तरीका
इस मामले में ग्रिड लेआउट को प्राप्त करने का एक अन्य तरीका स्पष्ट रूप से जावास्क्रिप्ट का उपयोग करना है ताकि वे सभी ग्रिड में उच्चतम तत्व के समान हो। तेज़ तरीका jQuery प्लगइन का उपयोग कर रहा होगा, जो आपको ज़रूरत पड़ने पर केवल पंक्ति द्वारा उन्हें समान आकार देने देता है, जो आपके मामले में उपयुक्त लगता है। बूटस्ट्रैप के कारण आपको पहले से ही jQuery का उपयोग करना होगा। चिनाई: जावास्क्रिप्ट तरीका
विभिन्न आयामों के साथ आपके द्वारा निर्दिष्ट गैर-ग्रिड प्रणाली को चिनाई लेआउट कहा जाता है। उस के लिए भी एक उपयोगी library , हालांकि मुझे नहीं लगता कि यह लायक होगा यदि आपको केवल उस क्षेत्र में इस तरह के लेआउट का उपयोग करने की आवश्यकता है। यह आपके मार्कअप को भी काफी गंदा कर देता है, और मुझे नहीं पता कि यह बूटस्ट्रैप के साथ अच्छी तरह से किराए पर है या नहीं। चिनाई: Boostrap तरीका है
मुझे यकीन नहीं है क्योंकि मैंने इसे आज़माया नहीं है, लेकिन आप इस तरह से सामग्री को व्यवस्थित करने की कोशिश कर सकते हैं:

<div class="row">
  <div class="col-sm-4">
    <!-- table 1 -->
    <!-- table 2 -->
  </div>
  <div class="col-sm-4">
    <!-- table 3 -->
    <!-- table 4 -->
  </div>
  <div class="col-sm-4">
    <!-- table 5 -->
    <!-- table 6 -->
  </div>
</div>

यदि आपकी तालिकाओं को एक सटीक क्रम में होने की आवश्यकता है, तो यह एक इष्टतम समाधान नहीं हो सकता है।


आप उपयोग कर सकते हैं

<div class="clearfix visible-xs-block"></div>

विभिन्न लेआउट के लिए इसे लचीला रखते हुए कुछ पदों पर विभिन्न आकारों के लिए।

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 3-->
    </div>
    <div class="clearfix visible-sm-block visible-md-block"></div>
    ...
</div>

यह अलग-अलग कॉलम की ऊंचाई के कारण है। रैपिंग को मजबूर करने के लिए आपको हर 3 कॉलम को "क्लीयरफिक्स" रीसेट करना होगा। एक तरीका बूटस्ट्रैप द्वारा सुझाए गए दृष्टिकोण का उपयोग करना है, या इस विशिष्ट मामले में आप इस तरह एक सरल सीएसएस क्लीयरफिक्स का उपयोग कर सकते हैं ..

@media (min-width:992px) {
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}

डेमो: http://codeply.com/go/mONLiFj30T

विभिन्न कोल चौड़ाई और ग्रिड टियर के साथ अन्य "क्लियरफिक्स" परिदृश्यों के लिए, एक सार्वभौमिक सीएसएस केवल क्लीयरफिक्स समाधान है जो अधिक परिदृश्य (असमर्थित) फिट होगा।

"चिनाई" शैली के लेआउट के लिए एक और समाधान CSS कॉलम होगा, लेकिन यह बूटस्ट्रैप ग्रिड का उपयोग नहीं करता है: http://www.bootply.com/mYkzRDvbEq

इस मुद्दे पर मेरा पूरा जवाब देखें





grid-layout