दिलचस्प पोस्ट
आप स्क्रीन आकार को तेजी से कैसे बदल सकते हैं? एंड्रॉइड में दृश्य के लिए वैश्विक शैलियाँ सेट करना मॉड्यूल डिस्क्रिप्टर वर्ग को लोड करने में विफल: कक्षा "com.google.android.gms.dynamite.descriptors.com.google.firebase.auth.ModuleDescriptor" नहीं मिला इंस्टॉलेशन के ठीक बाद एक .नेट विंडोज सर्विस कैसे शुरू करें? जावास्क्रिप्ट में चर का दायरा क्या है? संख्याओं को सी # शब्दों में परिवर्तित करना जावा में एक जेनेरिक क्लास को इंस्टेंटिएट करना "लाइनिंग" क्या है? एसटीएल मानचित्र में, क्या मैप का उपयोग करना बेहतर है? क्रोम एक्सटेंशन संदेश पासिंग: प्रतिक्रिया नहीं भेजी गई एसडीके टूल में एंड्रॉइड एमुलेटर शुरू करने, 12 संशोधन विशिष्ट एजेक्स कॉल्स पर .jaxStart () कैसे कॉल करें मेरे UITableView के शीर्ष पर यूट्यूब में स्टाइल UITableViewStyleGrouped के साथ क्यों अतिरिक्त पैडिंग है स्ट्रिंग से बचने का क्या मतलब है? प्रक्रिया आईडी Xcode संलग्न करने में विफल

मैं मोबाइल लेआउट पर बूटस्ट्रैप 3 कॉलम ऑर्डर कैसे बदलूं?

मैं एक शीर्ष निर्धारित नौबार के साथ एक उत्तरदायी लेआउट बना रहा हूँ मेरे पास दो कॉलम हैं, एक साइडबार (3) के लिए, और सामग्री के लिए एक (9)। जिस पर डेस्कटॉप इस तरह दिखता है

नेवबार
[3] [9]

जब मैं मोबाइल का resize navbar हूं तो navbar संपीड़ित और छुपा हुआ होता है, तो साइडबार सामग्री के शीर्ष पर स्टैक्ड होता है, जैसे:

नेवबार
[3]
[9]

मैं शीर्ष पर मुख्य सामग्री चाहूंगा, इसलिए मुझे इस पर मोबाइल पर ऑर्डर बदलने की आवश्यकता है:

नेवबार
[9]
[3]

मुझे यह आलेख मिल गया है, जो उसी अंक को शामिल करता है, लेकिन स्वीकृत उत्तर को संपादित करने के लिए कहा गया है कि समाधान कोई बूटस्ट्रैप के वर्तमान संस्करण पर लागू नहीं होता है।

मैं मोबाइल पर इन कॉलमों को पुन: क्रमित कैसे कर सकता हूं? या वैकल्पिक रूप से, मैं सिडबार सूची-समूह को अपने विस्तारित नौबार में कैसे प्राप्त करूं?

यहां मेरा कोड है:

 <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="#" class="navbar-brand">Brand Title</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"><!--original navbar--> <li class="active"><a href="#">Home</a></li> <li><a href="#">FAQ</a></li> </ul> </div> </div> </div><!--End Navbar Div--> <div class="container"> <div class="row"> <div class="col-lg-3"> <div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">Lorem ipsum</h4> <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a> </div> </div><!--end sidebar--> <div class="col-lg-9"> <div class="panel panel-default"> <div class="panel-body"> <div class="page-header"> Main Content </div> </div> </div><!--end main content area--> 

वेब के समाधान से एकत्रित समाधान "मैं मोबाइल लेआउट पर बूटस्ट्रैप 3 कॉलम ऑर्डर कैसे बदलूं?"

आप छोटे स्क्रीन में कॉलम के क्रम को नहीं बदल सकते हैं लेकिन आप बड़ी स्क्रीन में ऐसा कर सकते हैं।

तो अपने कॉलम का क्रम बदल दें।

 <!--Main Content--> <div class="col-lg-9 col-lg-push-3"> </div> <!--Sidebar--> <div class="col-lg-3 col-lg-pull-9"> </div> 

डिफ़ॉल्ट रूप से यह मुख्य सामग्री को पहली बार प्रदर्शित करता है।

इसलिए मोबाइल मुख्य सामग्री में पहले दिखाया गया है।

col-lg-push और col-lg-pull का उपयोग करके हम बड़ी स्क्रीन में कॉलम को पुन: क्रमित कर सकते हैं और दाएं पर बाएं और मुख्य सामग्री पर साइडबार प्रदर्शित कर सकते हैं।

यहां काम कर रहे बेला

यहां उत्तर सिर्फ 2 कोशिकाओं के लिए काम करते हैं, लेकिन जैसे ही उन स्तंभों में अधिक हो, यह थोड़ा अधिक जटिलता का कारण बन सकता है मुझे लगता है कि मैंने कई कॉलमों में किसी भी संख्या में कक्षों के लिए एक सामान्यीकृत समाधान पाया है I

लक्ष्य

टैबलेट / डेस्कटॉप पर डिजाइन कॉल के लिए जो कुछ भी क्रम में स्वयं को व्यवस्थित करने के लिए मोबाइल पर टैगों के ऊर्ध्वाधर अनुक्रम प्राप्त करें। इस कंक्रीट उदाहरण में, एक टैग सामान्य रूप से पहले प्रवाह दर्ज करना होगा, और बाद में सामान्य रूप से यह सामान्य रूप से होता है।

मोबाइल

 [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 लागू होता है float: right , जिसका अर्थ है कि वे पहले खुले स्थान पाते हैं, जो वे दाईं ओर फिट होंगे। आप निम्न क्रम में काम कर रहे ब्राउज़र के सीएसएस प्रोसेसर के बारे में सोच सकते हैं: 1 सही शीर्ष कोने में फिट बैठता है 2 अगले है और नियमित ( float: left ) है, इसलिए यह शीर्ष-बाएं कोने में जाता है फिर 3, जो float: right इसलिए यह 1 के नीचे की float: right बढ़ जाता है।

लेकिन यह समाधान 4 caption लिए पर्याप्त नहीं था; क्योंकि सही 2 कोशिकाएं बहुत कम हैं 2 image बाईं ओर की 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; } } 

इसलिए, सामान्यीकृत समाधान यहां हैक टैग जोड़ने के लिए है जो मोबाइल पर गायब हो सकता है। टेबलेट + पर हैक टैग प्रदर्शित टैग को प्रवाह में पहले या बाद में प्रदर्शित होने की अनुमति देता है, फिर उन हैक टैग को कवर करने के लिए ऊपर या नीचे खींचें।

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

नोट 2: आपके लेआउट पर निर्भर करते हुए, आपको टेबलेट + (या बड़ा रिज़ॉल्यूशन) पर लगातार पर्याप्त कॉलम ऑर्डर हो सकता है, ताकि आप इसके बजाय margin-bottom टैग के उपयोग के बजाय, टैग के उपयोग से बच सकें:

नोट 3: यह बूटस्ट्रैप 3 का उपयोग करता है। बूटस्ट्रैप 4 एक अलग ग्रिड सेट का उपयोग करता है, और इन उदाहरणों के साथ काम नहीं करेगा।

http://jsfiddle.net/b9chris/52VtD/16632/

2017 का अद्यतन करें

बूटस्ट्रैप 3 पर आधारित मूल प्रश्न के लिए, समाधान बड़ी चौड़ाई के लिए पुश पुल का उपयोग करना था, और फिर कॉलम दिखाएंगे कि उनके प्राकृतिक आदेश छोटे (एक्स) चौड़ाई पर हैं

 <div class="container"> <div class="row"> <div class="col-md-9 col-md-push-3"> main </div> <div class="col-md-3 col-md-pull-9"> sidebar </div> </div> </div> 

बूटस्ट्रैप 3: http://www.codeply.com/go/wgzJXs3gel

@ मेरे ने कहा, " आप छोटे स्क्रीन में कॉलम के क्रम को नहीं बदल सकते हैं, लेकिन आप बड़ी स्क्रीन में ऐसा कर सकते हैं "।

हालांकि, यह स्पष्ट करने के लिए यह स्पष्ट किया जाना चाहिए: "आप बूटस्ट्रैप 3 में पूर्ण-चौड़ाई " स्टैक्ड "कॉलम के क्रम को बदल नहीं सकते।"


हालांकि, बूटस्ट्रैप 4 (अल्फा 6) में अब ऑर्डर बदलना संभव है , भले ही कॉलम पूर्ण रूप से खड़ी हों, तो बूटस्ट्रैप 4 फ्लेक्सबॉक्स के लिए धन्यवाद। ओएफसी, पुश पुल पद्धति अभी भी काम करेगी, लेकिन अब बूटस्ट्रैप 4 में कॉलम ऑर्डर बदलने के अन्य तरीके हैं, जिससे पूर्ण-चौड़ाई वाले कॉलम को पुन: ऑर्डर करना संभव है।

विधि 1 – xs स्क्रीन के लिए flex-column-reverse उपयोग करें:

 <div class="row flex-column-reverse flex-md-row"> <div class="col-md-3"> sidebar </div> <div class="col-md-9"> main </div> </div> 

विधि 2 – xs स्क्रीन के लिए flex-first उपयोग करें:

 <div class="row"> <div class="col-md-3"> sidebar </div> <div class="col-md-9 flex-first flex-md-unordered"> main </div> </div> 

बूटस्ट्रैप 3: http://www.codeply.com/go/bBMOsvtJhD

पहले मोबाइल संस्करण के साथ शुरू, आप जो भी चाहते हैं, अधिकांश समय प्राप्त कर सकते हैं।

यहाँ उदाहरण:

http://jsbin.com/wulexiq/edit?html,css,output

 <div class="container"> <h1>PUSH - PULL Bootstrap demo</h1> <h2>Version 1:</h2> <div class="row"> <div class="col-xs-12 col-sm-5 col-sm-push-3 green"> IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN <hr> TOP ROW XS-SMALL SCREEN </div> <div class="col-xs-12 col-sm-4 col-sm-push-3 gold"> TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN <hr> MIDDLE ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-3 col-sm-pull-9 red"> TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN <hr> BOTTOM ROW ON XS-SMALL </div> </div> <h2>Version 2:</h2> <div class="row"> <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow"> TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN <hr> TOP ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue"> TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN <hr> MIDDLE ROW XS-SMALL SCREEN </div> <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink"> IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN <hr> BOTTOM ROW ON XS-SMALL </div> </div> <h2>Version 3:</h2> <div class="row"> <div class="col-xs-12 col-sm-5 cyan"> TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-3 col-sm-push-4 orange"> TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN <hr> MIDDLE ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown"> IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN <hr> BOTTOM ROW XS-SMALL SCREEN </div> </div> <h2>Version 4:</h2> <div class="row"> <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue"> TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN <hr> TOP ROW XS-SMALL SCREEN </div> <div class="col-xs-12 col-sm-4 beige"> MIDDLE ON SMALL/MEDIUM/LARGE SCREEN <hr> MIDDLE ROW ON XS-SMALL </div> <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver"> TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN <hr> BOTTOM ROW ON XS-SMALL </div> </div> </div> 

अक्टूबर 2017

मैं एक और बूटस्ट्रैप 4 समाधान जोड़ना चाहता हूं। जो मेरे लिए काम करता है

सीडीज़ "ऑर्डर" प्रॉपर्टी, मीडिया क्वेरी के साथ मिलती है, जब वे छोटी स्क्रीन में स्टैक्ड हो जाती हैं तो फिर से ऑर्डर कॉलम के लिए इस्तेमाल किया जा सकता है

कुछ इस तरह:

 @media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } } 

कोडपेन लिंक: https://codepen.io/preston206/pen/EwrXqm

स्क्रीन आकार को समायोजित करें और आप देखेंगे कि कॉलम अलग-अलग क्रम में स्टैक्ड हो जाते हैं।

मैं मूल पोस्टर के प्रश्न के साथ इसमें बाँध दूँगा। सीएसएस के साथ, नेविबार, साइडबार, और सामग्री को लक्षित किया जा सकता है और उसके बाद ऑर्डर प्रॉपर्टी को मीडिया क्वेरी में लागू किया जा सकता है।

यह insertAfter () या insertBefore () का उपयोग कर jQuery के साथ काफी आसान है।

<div class="left">content</div> <div class="right">sidebar</div>

 <script> $('.right').insertBefore('left'); </script>