केवल बूटस्ट्रैप के साथ मोबाइल स्क्रीन पर div/element को संकुचित करें। उदाहरण तस्वीर

Question

बूटस्ट्रैप का उपयोग करके - केवल साइडबार div को पतन करना संभव है - केवल मोबाइल पर? मैं छवि में उदाहरण की तरह कुछ करने के बारे में कैसे जाउंगा? तो एक मोबाइल पर साइडबार ध्वस्त हो जाती है और जब क्लिक किया जाता है, फैलता है। मुझे समझ में नहीं आता कि कैसे मीडिया प्रश्न मुझे शामिल jquery के कारण ऐसा करने की अनुमति देंगे।

http://i46.tinypic.com/2mzxflu.jpg

कुछ इसी तरह की है, लेकिन वास्तव में इस तरह यहां पर सवाल कुछ भी नहीं देखा है। क्या कोई मुझे सही दिशा में समझा सकता है या कम से कम इंगित कर सकता है? अग्रिम में धन्यवाद।

Answer 1

एक त्वरित और गंदा तरीका: पूर्ण आकार की साइडबार के लिए कोड लिखना होगा जिसे आप डेस्कटॉप स्क्रीन पर दिखाना चाहते हैं और मोबाइल उपकरणों पर दिखाने के लिए ध्वस्त साइडबार के लिए अलग मार्कअप लिखना चाहते हैं।

फिर साइडबार के किसी भी संस्करण को प्रदर्शित करने के लिए चुनने के लिए classes provided by bootstrap का उपयोग मीडिया प्रश्नों के आधार पर छिपाने और सामग्री दिखाने के लिए करें।

संक्षिप्त किए साइडबार: .hidden-desktop .hidden-tablet .visible-phone

पूर्ण साइडबार: hidden-phone .visible-tablet .visible-desktop

Answer 2

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

यह बूटस्ट्रैप वी 3 स्रोत फ़ाइलों में एक बग (2013/09/05 पर बने हुए कस्टम संस्करण) से आता है। (उन शैलियों मूल बूटस्ट्रैप वी 3 स्रोत के पिछले संस्करण से आते हैं)

.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease} 
@media screen and (min-width:768px){.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}} 

: बस सही मूल bootstrap.css के बाद निम्नलिखित सीएसएस लोड।

अन्यथा, मेरी एकमात्र गलती मेरे एचटीएमएल पेज में पतन प्लग-इन शुरू करना था। आप अपने HTML स्रोत कोड में कुछ इस तरह मिल गया है तो अगर:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.collapse').collapse(); 
    }); 
</script> 

... तो बस इसे और पतन प्लग में एक आकर्षण की तरह काम करेगा हटा दें।

Answer 3

मैं इस मुद्दे पर पहुंचने समाप्त हो गया है और इसके लिए एक CSS वर्ग कहा: तो फिर

.collapse-non-md { 
    height: 0; 
    display: none; 
} 
.collapse-non-md.collapsing { 
    display: block; 
} 

@media (min-width: 992px) { 
    .collapse-non-md { 
     height: auto; 
     display: block; 
    } 
} 

मैं तत्व मैं collapse-non-md के माध्यम से नीचे स्क्रीन पर गिर चाहते थे और देखा, यह छोटे पर गिर रहा है के वर्ग सेट ब्राउज़र और मध्यम वाले पर खुले। इसे अभी भी खोला जा सकता है और सामान्य तरीके से बंद कर दिया जा सकता है (.in कक्षा .collapse-non-md ओवरराइड करता है)।