यहां उत्तर केवल 2 कोशिकाओं के लिए काम करते हैं, लेकिन जैसे ही उन कॉलमों में अधिक होते हैं, यह थोड़ा अधिक जटिलता पैदा कर सकता है। मुझे लगता है कि मैंने कई कॉलमों में किसी भी संख्या में कोशिकाओं के लिए एक सामान्यीकृत समाधान पाया है।
लक्ष्य
टेबलेट / डेस्कटॉप पर डिज़ाइन कॉल के लिए जो कुछ भी ऑर्डर करना है, उसमें खुद को व्यवस्थित करने के लिए मोबाइल पर टैग का एक ऊर्ध्वाधर अनुक्रम प्राप्त करें। इस ठोस उदाहरण में, एक टैग को सामान्य रूप से पहले प्रवाह में प्रवेश करना होगा, और दूसरा बाद में सामान्य रूप से।
मोबाइल
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
गोली +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
इसलिए हेडलाइन को टैबलेट + और तकनीकी रूप से सही फेरबदल करने की आवश्यकता है, इसलिए यह डीईसी - यह कैप्शन टैग के ऊपर बैठता है जो इसे मोबाइल पर प्रीयर करता है। आप देखेंगे एक पल में 4 कैप्शन मुसीबत में है।
मान लें कि प्रत्येक कोशिका ऊंचाई में भिन्न हो सकती है, और इसके अगले सेल (तालिका की तरह कमजोर चाल से बाहर) के साथ ऊपर से नीचे की ओर फ्लश करने की आवश्यकता है।
जैसा कि सभी बूटस्ट्रैप ग्रिड समस्याओं के साथ है, चरण 1 का एहसास है कि HTML को पृष्ठ पर मोबाइल-ऑर्डर, 1 2 3 4 5 में होना है। फिर, निर्धारित करें कि टैबलेट / डेस्कटॉप को इस तरह से स्वयं को कैसे पुन: व्यवस्थित करना है - आदर्श रूप से जावास्क्रिप्ट के बिना।
पाने के लिए 1 headlineऔर 3 qtyदाईं ओर नहीं बैठने के लिए समाधान बस उन दोनों को सेट करना है pull-right। यह सीएसएस लागू होता है float: right, जिसका अर्थ है कि वे पहली खुली जगह पाते हैं जो वे दाईं ओर फिट करेंगे। आप निम्न क्रम में काम कर रहे ब्राउज़र के सीएसएस प्रोसेसर के बारे में सोच सकते हैं: 1 दाएं शीर्ष कोने में फिट बैठता है। 2 अगला है और नियमित है ( float: left), इसलिए यह शीर्ष-बाएं कोने में जाता है। फिर 3, जो float: rightऐसा है वह 1 के नीचे से छलांग लगाता है।
लेकिन यह समाधान पर्याप्त नहीं था 4 caption; क्योंकि दाईं ओर 2 कोशिकाएं बाईं ओर छोटी होती हैं, इसलिए 2 imageदोनों संयुक्त की तुलना में अधिक लंबी होती हैं। बूटस्ट्रैप ग्रिड एक शानदार फ्लोट हैक है, जिसका अर्थ 4 caption है float: left। साथ 2 imageबाईं तरफ इतना कक्ष पर कब्जा है, 4 captionप्रयास अगले उपलब्ध अंतरिक्ष में फिट करने के लिए - अक्सर अधिकार स्तम्भ, नहीं छोड़ दिया, जहां हम यह चाहते थे।
यहाँ समाधान (और आम तौर पर इस तरह के किसी भी मुद्दे के लिए) एक हैक टैग जोड़ने के लिए था, मोबाइल पर छिपा हुआ है, जो टैबलेट + पर मौजूद है कैप्शन को बाहर धकेलने के लिए, और फिर एक नकारात्मक मार्जिन द्वारा कवर किया जाता है - जैसे:
[2 image ][1 headline]
[ ][3 qty ]
[ ][4 hack ]
[5 caption][6 desc ^^^]
[ ][ ]
http://jsfiddle.net/b9chris/52VtD/16633/
HTML:
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
सीएसएस:
#hack { height: 50px; }
@media (min-width: @screen-sm) {
#desc { margin-top: -50px; }
}
तो, यहाँ सामान्यीकृत समाधान हैक टैग जोड़ने के लिए है जो मोबाइल पर गायब हो सकते हैं। टैबलेट + पर हैक टैग प्रदर्शित टैग को प्रवाह में पहले या बाद में प्रदर्शित करने की अनुमति देते हैं, फिर उन हैक टैग को कवर करने के लिए ऊपर या नीचे खींचा जाता है।
नोट: मैंने लिंक किए गए jsfiddle में सरल उदाहरण के लिए निश्चित ऊंचाइयों का उपयोग किया है, लेकिन मैं जिस वास्तविक साइट सामग्री पर काम कर रहा था, वह सभी 5 टैग में ऊंचाई में भिन्न है। यह टैग हाइट्स, विशेष रूप से छवि और डीएससी में अपेक्षाकृत बड़े विचरण के साथ ठीक से प्रतिपादन करता है।
नोट 2: आपके लेआउट के आधार पर, आपके पास टेबलेट + (या बड़े रिज़ॉल्यूशन) पर लगातार पर्याप्त कॉलम ऑर्डर हो सकता है, जिससे आप हैक टैग के उपयोग से बच सकते हैं margin-bottom, जैसे कि
नोट 3: यह बूटस्ट्रैप 3 का उपयोग करता है। बूटस्ट्रैप 4 एक अलग ग्रिड सेट का उपयोग करता है, और इन उदाहरणों के साथ काम नहीं करेगा।
http://jsfiddle.net/b9chris/52VtD/16632/