2014-12-18 27 views
6

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

<div class="row"> 
    <div class="col-lg-4">post</div> 
    <div class="col-lg-4">longer post that is going to take more height than the others</div> 
    <div class="col-lg-4">post</div> 
</div> 
<div class="row"> 
    <div class="col-lg-4">post</div> 
    <div class="col-lg-4">post</div> 
    <div class="col-lg-4">post</div> 
</div> 

तो मैं दो पंक्तियों के बीच सफेद स्थान के साथ छोड़ दिया जाएगा, मैं क्या हासिल करने की कोशिश कर रहा हूँ एक चिनाई प्रभाव (जहां एक पोस्ट को भरने यह ऊपर पोस्ट के पास बैठने) के साथ ही है सीएसएस का उपयोग, विशेष रूप से बूटस्ट्रैप 3 ग्रिड सिस्टम। अर्थात:

enter image description here

मैं जानता हूँ कि इस plugins साथ किया जा सकता, लेकिन मैं अगर थेरेस एक अधिक शुद्ध (भले ही hacky हो गया है) समाधान देखना चाहते हैं। कोई विचार?

+0

http://sickdesigner.com/masonry-css-getting-awesome-with-css3/ – Christina

+0

जिस तरह से एब्रियान सुझाव देता है और उपरोक्त लिंक कॉलम ऑर्डर में बॉक्स बॉक्स ऑर्डर में बॉक्स रखता है, और चिनाई उन्हें जहां भी फिट करता है, रखता है, और यह क्रम में नहीं है लेकिन यह कभी-कभी बंद होता है। – Christina

+0

@ बूटस्ट्रैप बूगी-क्रिस्टीना मुझे यह लिंक पसंद आया, हालांकि यह वास्तव में बूटस्ट्रैप 3 ग्रिड सिस्टम का उपयोग नहीं करता है, मैंने एक पहेली को एक साथ रखा है: http://jsfiddle.net/vtanz6xc/2/ जो अभी भी कॉलम सिस्टम का उपयोग करता है, मुझे लगता है कि इसे अभी के लिए काम करना होगा। – Typhomism

उत्तर

14

हमने इसे एक साइट पर किया, और हमने जो किया वह ग्रिड को ऊर्ध्वाधर पंक्तियों में रखा गया था।

उदाहरण: (। अपने पूर्व में col-lg-4)

<div class="row"> 
    <div class="col-lg-4"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    </div> 
    <div class="col-lg-4"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    </div> 
    <div class="col-lg-4"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    </div> 
<div> 
+2

"ग्रिड को ऊर्ध्वाधर पंक्तियों में रखें" से आपका क्या मतलब है। बूटस्ट्रैप में बॉक्स बॉक्स नहीं लगता है, बस एक टफ उलझन में – Typhomism

+0

यह एक उदाहरण है, 'बॉक्स' शब्दशः लेने की आवश्यकता नहीं है।"ऊर्ध्वाधर पंक्तियां" कॉलम हैं, सिवाय इसके कि मैं नहीं चाहता था कि आप वास्तव में कॉलम का उपयोग करने के बारे में सोचें। जिस तरह से आप इसे करने की सोच रहे हैं, वह पूरे हो रहा है, जब इसे नीचे और ऊपर बहना चाहिए। ऑर्डरिंग के लिए आपको निश्चित रूप से जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी। हमने एलआई पर बूटस्ट्रैप ग्रिड क्लास के साथ स्थापित किया था। – Aibrean

+0

आह मैं देखता हूं, इसलिए मूल रूप से मैंने यहां क्या किया: http://jsfiddle.net/vtanz6xc/2/ – Typhomism

4

Bootstap में .row तत्व div-ब्लॉक के तैरता समाशोधन के लिए प्रयोग किया जाता है/स्तंभ यह होता है;

तो यह अलग-अलग पंक्तियों में तत्वों को एक-दूसरे के बगल में खड़े होने के लिए मूल रूप से असंभव है, आपको आवश्यक रूप से मार्कअप को बदलने की आवश्यकता है;

दूसरी ओर बूटस्ट्रैप उत्तरदायी स्तंभ प्रणाली का उपयोग कर एक सीएसएस-चिनाई प्रभाव बनाने के लिए उपयोगी हो सकता है पर:
आप सभी "कॉल-आइटम" है कि आप एक पंक्ति अंदर पर चिनाई प्रभाव बनाना चाहते रखने की कोशिश कर सकते , इनलाइन-ब्लॉक (प्लस हो सकता है कि कुछ अन्य छोटे समायोजन ..) को चाल चलाना चाहिए (यदि आप केवल सीएसएस के साथ फंस गए हैं तो यह जाने का तरीका है ..);

निष्कर्ष याद रखें कि चिनाई का जन्म हुआ था और जावास्क्रिप्ट ग्रिड लेआउट लाइब्रेरी बनी हुई है, इसलिए यदि आप इसे सीएसएस के साथ काम कर सकते हैं तो भी मैं आपको जेएस का उपयोग करने का सुझाव देता हूं।

इस अद्भुत विचार के लिए Desandro के लिए एक हजार धन्यवाद;

4

बूटस्ट्रैप 4 में आप .card-columns उपयोग कर सकते हैं, यहाँ देखें: https://v4-alpha.getbootstrap.com/components/card/

हालांकि मैं isotope का उपयोग कर के रूप में जे एस और अधिक नियंत्रण और सीएसएस की तुलना में बेहतर अनुकूलता प्रदान करता है की सिफारिश करेंगे।

0

मैं एक साधारण चिनाई ग्रिड कि डीबी से छवियों को प्राप्त करते हैं, सिर्फ इस तरह सीएसएस द्वारा किया:

<div class="container"> 
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>"> 
    <div class="image-gallerie">               
    <img src="<?php echo $src; ?>" class="img-gallerie lazy" alt="Gallery image" id="<?php echo $count; ?>" />            

    </div> 
    </a> 
    </div> 
    </div> 

    .container { 
    -moz-column-width: 35em; 
    -webkit-column-width: 35em; 
    -moz-column-gap: 1em; 
    -webkit-column-gap:1em; 
    } 

    .image-gallerie { 
    width: 100%; 
    } 
    .image-gallerie img{ 
    width: 100%; 
    height: 100%; 
    margin-top: 15px; 
     margin-bottom: 10px; 
    } 
संबंधित मुद्दे