बूटस्ट्रैप एफ़िक्स बदलना सूची आइटम चौड़ाई

Question

मैं बाएं कॉलम को प्रत्यर्पित करने के लिए ट्विटर बूटस्ट्रैप के प्रत्यय का उपयोग कर रहा हूं जिसमें वर्तमान में नेविगेशन सूची है।

<div class="row"> 
    <div class="span3"> 
     <ul class="nav nav-list" data-spy="affix" data-offset-top="300"> 
      <li class="nav-header">Navigation</li> 
      <li><a href="#">Link1</a></li> 
      <li><a href="#">Link2</a></li> 
     </ul> 
    </div> 

मेरी समझ से, इसका मतलब यह है कि 300xx तक स्क्रॉल नहीं होने तक प्रत्यय किक नहीं होगा। मेरी समस्या यह है कि एफ़िक्स के बाद मेरी सूची आइटम की चौड़ाई बदल जाती है।

यहां एफ़िक्स में आने से पहले सूची आइटम पर मेरे होवरिंग का एक स्क्रीनशॉट है। आप होवर पृष्ठभूमि पर आधारित हो सकते हैं, चौड़ाई सही है।

यहाँ एक स्क्रीनशॉट के बाद मैं 300px स्क्रॉल और बज उठती चिपका दिया है। आप किसी कारण चौड़ाई कम हो जाती है के लिए देख सकते हैं।

मुझे पता है कि यह क्यों हो रहा है, यह कैसे सही करने के लिए चाहते हैं, और अगर मैं सही ढंग से चिपका उपयोग कर रहा हूँ।

Answer 1

कुछ शोध के बाद, मुझे पता चला कि समस्या क्या है।

1. पहले प्रत्यय में लात मारता है, चौड़ाई माता-पिता मेरी चिपका एनएवी के साथ 'span3' div से विरासत में मिली है।

2. प्रत्यय में आने के बाद, उस चिपकने वाली नौसेना को उस माता-पिता से हटा दिया जाता है, यही कारण है कि यह इसकी चौड़ाई खो रहा है। एफ़िक्स प्लगइन मूल रूप से इसे डीओएम से बाहर निकाल देता है और चिपकने वाला तत्व मैन्युअल रूप से शीर्ष पर रखता है।

समाधान मैन्युअल रूप से .affix वर्ग को चौड़ाई देना है। मेरे मामले में, मैंने इसे एक चौड़ाई दी है जो span3 अभिभावक को अनुकरण करती है।

.affix { 
    position: fixed; 
    top: 20px; 
    width: 190px; 
} 

span3 220px चौड़ाई है, जिसमें बाएं और दाएं दोनों पर 15px पैडिंग है। तो मेरे ऊपर उपरोक्त सीएसएस काम किया है।

यदि आपके पास एकाधिक प्रत्यय हैं, तो आपको अलग-अलग चौड़ाई का चयन और लागू करना होगा।