ट्विटर बूटस्ट्रैप 2: शीर्ष पर बजाय साइडबार को रखने के लिए उत्तरदायी डिज़ाइन कैसे प्राप्त करें?

Question

Twitter's Bootstrap 2 अंत में देशी उत्तरदायी डिजाइन जोड़ा गया। हालांकि, डिफ़ॉल्ट रूप से जब ब्राउज़र की चौड़ाई न्यूनतम चौड़ाई से कम होती है, तो यह साइडबार को शीर्ष पर रखती है। मैं देख सकता हूं कि यह कई साइटों के लिए कैसे काम करेगा, लेकिन मैं वास्तव में छोटे चौड़ाई वाले लेआउट पर नीचे साइडबार चाहता हूं।

मैं ट्विटर बूटस्ट्रैप के लिए नया ब्रांड हूं और bootstrap-response.css में सीएसएस का कौन सा हिस्सा पता लगाने की कोशिश की, लेकिन मुझे @media (max-width: 480px) के लिए अनुभाग में कुछ भी नहीं देखा।

मैंने responsive design के लिए बूटस्ट्रैप दस्तावेज़ को देखा और इसमें बहुत अधिक जानकारी नहीं है।

कुछ संकेत दिए गए प्यार करोगे ...

Answer 1

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

सीएसएस

.sidebar-nav { 
    padding: 9px 0; 
    width:100%; 
} 

#sidebar { 
    float:left; 
    margin-left:0; 
} 

#content { 
    float:right !important; 
    margin-left:auto; 
} 

@media (max-width: 767px) { 
    #sidebar { 
     display: inline-block; 
     margin-top: 20px; 
     width: 100%; 
    } 

    #content { 
     float:none !important; 
     margin-left:0; 
    } 
} 

तुम सब करने की ज़रूरत

<div id="content" class="span9"> ... </div> /* item you want up top first */ 
<div id="sidebar" class="span3"> ... </div> /* last item to be rendered below */ 

डेमो:: http://jsfiddle.net/andresilich/YEUwN/1/show/ संपादित करें यहाँ: http://jsfiddle.net/andresilich/YEUwN/1/

+०१२३५१६४१०६ ऐसा तरह कंटेनर divs फ्लिप है

Answer 2

यह आसान हो सकता है।

// Pull right sidebar to top 
<div class="row"> 
    <div class="span3 pull-right">Right sidebar</div> 
    <div class="span9">Content section</div> 
</div> 

// Or pull left sidebar to bottom side 
<div class="row"> 
    <div class="span9 pull-right">Content section</div> 
    <div class="span3">Left Sidebar</div> 
</div> 

Answer 3

कोई एक अनुकूलित समाधान, लेकिन यहाँ है कैसे मैंने किया:

<script type="text/javascript"> 
$(window).resize(function() { 
    if ($(window).width() < 768) { 
     $(".sidebar").insertAfter(".main"); 
    } 
    else{ 
     $(".main").insertAfter(".sidebar"); 
    } 
}); 

$(document).ready(function(){ 
    if ($(window).width() < 768) { 
     $(".sidebar").insertAfter(".main"); 
    } 
}); 
</script> 

Answer 4

यह एन्ड्रेस Ilich जो इस सवाल का जवाब के लिए है। मुझे ऊपर टिप्पणी करने या सीधे उससे संपर्क करने का कोई तरीका नहीं दिख रहा है। तो मैं मॉडरेटर से माफ़ी मांगता हूं।

इस धागे को और अधिक सहायक बनाने के लिए मैं जानना चाहता हूं कि "क्या आपको केवल इतना करना है कि कंटेनर divs को फ़्लिप करें:" कंटेनर divs कैसे फ़्लिप हो जाते हैं? कोड डेमो/एडिट अभी भी मेरे जैसे किसी के लिए स्पष्ट नहीं है जो उस तकनीक से परिचित नहीं है। मैं यह नहीं समझ सकता कि यह क्या कर रहा है और यह कैसे काम करता है। ऐसा लगता है कि कुछ जावास्क्रिप्ट इस पर अभिनय कर रहा है। आदर्श रूप में, केवल दो divs और न्यूनतम सीएसएस के साथ एक नंगे हड्डियों का उदाहरण होगा जिस पर सीएसएस रेखा "फ्लिप" होती है।

यदि किसी के पास विस्तार करने का समय है, तो मैं इसकी सराहना करता हूं।

Answer 5

मैंने द्रव ग्रिड के लिए स्रोत ऑर्डरिंग की अनुमति देने के लिए एक ग्रिड "एक्सटेंशन" बनाया - इसे अनुकूलित किया जा सकता है लेकिन यह काम करता है। बस col-pull-# & col-push-# (जहां # उन स्तंभों की संख्या है जिन्हें आप खींचना/धक्का देना चाहते हैं) का उपयोग करें। पहले तत्व के मार्जिन को ओवरराइड करने के लिए उस तत्व में first की कक्षा जोड़ें जिसे आप पंक्ति में पहले दिखाना चाहते हैं। डेमो देखें और यहाँ HTML/CSS/कम मिलती है:

http://jsfiddle.net/NGuL2/3/embedded/result/