ट्विटर बूटस्ट्रैप - उत्तरदायी प्रत्यय

Question

मैं ट्विटर बूटस्ट्रैप उपयोग कर रहा हूँ और मैं निम्नलिखित है:

<div class="row"> 

    <div class="span3"> 
     <div data-spy="affix"> 
      <form> 
       <!-- inputs and stuff --> 
      </form> 
     </div> 
    </div> 

    <!-- span9 and its contents --> 

</div> 

बूटस्ट्रैप सही ढंग से <div> पर प्रत्यय प्रभाव लागू कर रहा है और यह अभी भी रहता है जब मैं पृष्ठ नीचे स्क्रॉल। हालांकि, एक बार जब मैं पृष्ठ को मोबाइल आयामों और बूटस्ट्रैप के प्रतिबिंबित करता हूं तो उत्तरदायी प्रभाव होता है (Navbar collapsing/ऑब्जेक्ट्स एक दूसरे के नीचे अच्छी तरह से संरेखित होते हैं), चिपकने वाला <div> अब पृष्ठ के अन्य तत्वों के शीर्ष पर है और यह गन्दा हो जाता है। ऐसा इसलिए हो रहा है क्योंकि .affix में position: fixed है जो इसे बहुत अच्छी तरह से बताता है।

अब मैं Bootstrap की वेबसाइट पर गया और पृष्ठ को मोबाइल आयामों में बदल दिया, चिपकने वाला तत्व (<ul> उनके मामले में) पृष्ठ के साथ अच्छी तरह से बहने लगते हैं, अन्य तत्वों के शीर्ष पर बिना प्राकृतिक स्थान लेते हैं। मैंने यह भी देखा है कि एक बार ऐसा होने पर, कक्षा affix से affix-top में बदल दी गई है।

मुझे यकीन नहीं है कि यह उनका अनुकूलन है या यदि यह ढांचे का हिस्सा है, क्योंकि ढांचा स्पष्ट रूप से वही व्यवहार नहीं कर रहा है। क्या कोई इस पर विस्तार कर सकता है? मुझे अपने <div> पर एक ही व्यवहार करने की आवश्यकता है, जहां पृष्ठ मोबाइल आयामों में आकार बदलता है, तो चिपकने वाला तत्व इसकी प्राकृतिक जगह लेता है।

संपादित करें: मेरा अवलोकन थोड़ा सा दोषपूर्ण है। मैंने देखा कि प्रारंभ में उनके पृष्ठ पर तत्व affix-top है और एक बार जब मैं data-top-offset से नीचे स्क्रॉल करता हूं तो यह affix में बदल जाता है। यह अभी भी व्याख्या नहीं करता है कि मेरा <div> आकार बदलने पर उनके <ul> की तरह क्यों प्रस्तुत नहीं करेगा।

Answer 1

बूटस्ट्रैप extra CSS file for their docs का उपयोग करता है जो कुछ तत्वों के डिफ़ॉल्ट व्यवहार को ओवरराइड करता है।

विशेष रूप से, लाइन 917 पर, वे चिपका साइडबार के positionstatic करने के लिए बदल (< 767px चौड़ाई के लिए एक मीडिया क्वेरी के भाग के रूप):

.bs-docs-sidenav.affix { 
    position: static; 
    width: auto; 
    top: 0; 
} 

वे कई अतिरिक्त कस्टम चिपका के लिए लागू शैलियों है साइडबार; आप उन्हें फोन के आकार की विंडो पर क्रोम वेब इंस्पेक्टर/फायरबग का उपयोग कर देख सकते हैं।

Answer 2

एचटीएमएल span3 (या span4 आदि) DIV को चिपकाएं, लेकिन इसका एक बच्चा; मेरे मामले में मैंने # साइडबार लगाया। इसके अलावा आपको इस div में .affix क्लास या डेटा-ऑफसेट-टॉप = "XXX" जोड़ने की ज़रूरत नहीं है। निम्नलिखित जावास्क्रिप्ट चाल करेगा।

<aside class="span3"> 
    <div id="sidebar"> 
    <p>some content</p> 
    </div> 
    </aside> 

सीएसएस (नीचे दिए गए कोड bootstrap.css पर मौजूद नहीं है, मैं इसे http://twitter.github.io/bootstrap/assets/css/docs.css से नकल)

.affix-bottom { 
    position: absolute; 
    top: auto; 
    bottom: 400px; 
} 

Javacript निम्नलिखित js से #sidebar के वर्ग बदल जाएगा। प्रत्यय से नीचे .फिक्स-नीचे कितना पृष्ठ स्क्रॉल किया गया है

$('#sidebar').affix({ 
     offset: { 
     bottom: 450 
     } 
    }); 

वास्तव में मॉल संकल्प # साइडबार अन्य तत्वों को ओवरलैप करेगा।इस प्रयोग के बूटस्ट्रैप के मीडिया प्रश्नों http://twitter.github.io/bootstrap/scaffolding.html#responsive

की तरह के रूप में Sara पहले ने कहा, आप कुछ का उपयोग कर सकते हल करने के लिए ..

@media(max-width:767px){ 
    .affix { 
    position: static; 
    width: auto; 
    top: 0; 
    } 
} 

..so कि आप #sidebar व्यवहार करते हैं।

उम्मीद है कि यह किसी की मदद करेगा!

Answer 3

मुझे एक ही समस्या थी, और मेरा समाधान छोटे स्क्रीन आकारों के लिए प्रत्यय व्यवहार को हटाना था। उदाहरण के लिए, इसे 11 99 पिक्सल से नीचे के आकारों के लिए निकालने के लिए:

#map { 

    @media (min-width: 1199px) { 
    &.affix-top { 
    } 

    &.affix { 
     position: fixed; 
     top: 20px; 
     bottom: 100px; 
    } 

    &.affix-bottom { 
    } 
    } 
}