तरल लेआउट

Question

के साथ बूटस्ट्रैप एफ़िक्स प्लगइन अगर मैं तरल लेआउट में साइडबार के लिए एफ़िक्स प्लगइन का उपयोग करना चाहता हूं लेकिन साइडबार की चौड़ाई हमेशा चिपक जाती है और उत्तरदायी डिज़ाइन भी काम नहीं करता है।

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

क्या कोई जानता है कि इसे कैसे काम करना है?

Answer 1

तरल पदार्थ span3 साइडबार के साथ काम करने के लिए प्रत्यय के लिए, आपको चौड़ाई को क्लैंप करने और आकार बदलने के लिए कुछ जावास्क्रिप्ट जोड़ने की आवश्यकता होगी।

मैंने अभी यह काम करने के लिए थोड़ा जावास्क्रिप्ट फ़ंक्शन लिखा है।

बूटस्ट्रैप से this bug देखें।

/* 
* Clamped-width. 
* Usage: 
* <div data-clampedwidth=".myParent">This long content will force clamped width</div> 
* 
* Author: LV 
*/ 
$('[data-clampedwidth]').each(function() { 
    var elem = $(this); 
    var parentPanel = elem.data('clampedwidth'); 
    var resizeFn = function() { 
     var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth')); 
     elem.css('width', sideBarNavWidth); 
    }; 

    resizeFn(); 
    $(window).resize(resizeFn); 
}); 

Answer 2

उनकी वेबसाइट पर चिपकने वाला डेमो उत्तरदायी है, यह उम्मीद के अनुसार पृष्ठ के शीर्ष पर स्थित है। मोबाइल उपकरणों और छोटी स्क्रीन पर position:fixed सीएसएस संपत्ति एक व्यवहार्य विकल्प नहीं है ताकि कार्यक्षमता हटा दी जा सके।

Answer 3

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

यह ".span3" वर्ग को ओवरराइड करता है और स्क्रॉल करते समय साइडबार को आकार देने से रोकता है।

यदि आप उस स्पष्ट चौड़ाई की घोषणा को हटाते हैं और पृष्ठ को स्क्रॉल करते हैं तो साइडबार आपके द्वारा अपने पृष्ठ में दिखाई देने वाली समस्या की तरह ही आकार बदलता है।

Answer 4

$(document).ready(function() { 
    setTimeout(function() { 
    $('.sidebar > *').affix({ 
     offset: { 
     top: function() { return $window.width() <= 980 ? 290 : 210 } 
     , bottom: 270 
     } 
    }) 
    }, 100) 
}); 

जहाँ आपके पेज की तरह है:

<div class="span2 navper"> 
    <ul class="nav nav-tabs nav-stacked" data-spy="affix"> 
    <li><a href="#">Homepage</a></li> 
    <li><a href="#">Homepage</a></li> 
    <li><a href="#">Homepage</a></li> 
    <li><a href="#">Homepage</a></li> 
    <li><a href="#">Homepage</a></li> 
    </ul> 
</div>