क्रोम

Question

पर बूटस्ट्रैप 3 अजीब affix मुद्दा तो मैं बूटस्ट्रैप एफ़िक्स सुविधा का उपयोग करने की कोशिश कर रहा हूं लेकिन यह अजीब काम करता है। जब आप हेडर सेक्शन को नीचे स्क्रॉल करने का प्रयास करते हैं तो यह स्वचालित रूप से शीर्ष पर जाता है। ऐसा तब होता है जब स्क्रीन चौड़ाई 1100px से कम होती है। जब आप स्क्रॉल बार के साथ स्क्रॉल करते हैं तो यह केवल क्रोम पर ही होता है। मेरे पास क्या हो रहा है यह दिखाने के लिए bootply सेटअप है। तो क्या कोई मुझे यह जानने में मदद कर सकता है कि क्या हो रहा है?

यह देखकर video मदद कर सकता है।

सीएसएस:

header { 
       height: 365px; 
       background: url("http://i.imgur.com/wU2YhOJ.png"); 
       background-color: #262626; 
       background-size: cover; 
       background-position: center; 
      } 

      header h1{ 
       font-family: Montserrat, sans-serif !important; 
       font-size: 5.5em; 
       color: white; 
       word-break: normal; 
       padding-top: 115px; 

      } 

      body h1 { 
       font-family: 'Lato', sans-serif; 
       line-height: 72px; 
      } 

      body, footer { font-family: 'Open Sans', sans-serif !important; } 

      body p { line-height: 28px; } 

      footer { background-color: #262626; } 

      .fixed { 
       position: fixed; 
      } 

      /* sidebar */ 
      .bs-docs-sidebar { 
       padding-left: 20px; 
       margin-top: 60px; 
       margin-bottom: 20px; 
      } 

      /* all links */ 
      .bs-docs-sidebar .nav>li>a { 
       color: #999; 
       border-left: 2px solid transparent; 
       padding: 4px 20px; 
       font-size: 13px; 
       font-weight: 400; 
      } 

      /* nested links */ 
      .bs-docs-sidebar .nav .nav>li>a { 
       padding-top: 1px; 
       padding-bottom: 1px; 
       padding-left: 30px; 
       font-size: 12px; 
      } 

      /* active & hover links */ 
      .bs-docs-sidebar .nav>.active>a, 
      .bs-docs-sidebar .nav>li>a:hover, 
      .bs-docs-sidebar .nav>li>a:focus { 
       color: #262626;     
       text-decoration: none;   
       background-color: transparent; 
       border-left-color: #262626; 
      } 
      /* all active links */ 
      .bs-docs-sidebar .nav>.active>a, 
      .bs-docs-sidebar .nav>.active:hover>a, 
      .bs-docs-sidebar .nav>.active:focus>a { 
       font-weight: 700; 
      } 
      /* nested active links */ 
      .bs-docs-sidebar .nav .nav>.active>a, 
      .bs-docs-sidebar .nav .nav>.active:hover>a, 
      .bs-docs-sidebar .nav .nav>.active:focus>a { 
       font-weight: 500; 
      } 

      /* hide inactive nested list */ 
      .bs-docs-sidebar .nav ul.nav { 
       display: none;   
      } 
      /* show active nested list */ 
      .bs-docs-sidebar .nav>.active>ul.nav { 
       display: block;   
      } 
      /* special back to top styling */ 
      .back-to-top:hover, 
      .back-to-top:focus{ 
       border-left-color: transparent !important; 
      } 

HTML:

<div class="col-sm-2" id="body-right"> 
        <nav class="col-xs-3 bs-docs-sidebar"> 
         <ul id="sidebar" class="nav nav-stacked fixed"> 
          <li> 
           <a href="#GroupA">Getting Started</a> 
           <ul class="nav nav-stacked"> 
            <li><a href="#GroupASub1">Sub-Group 1</a></li> 
            <li><a href="#GroupASub2">Sub-Group 2</a></li> 
           </ul> 
          </li> 
          <li> 
           <a href="#GroupB">Font Awesome</a> 
           <ul class="nav nav-stacked"> 
            <li><a href="#GroupBSub1">Sub-Group 1</a></li> 
            <li><a href="#GroupBSub2">Sub-Group 2</a></li> 
           </ul> 
          </li> 
          <li> 
           <a href="#GroupC">Bootstrap</a> 
           <ul class="nav nav-stacked"> 
            <li><a href="#GroupCSub1">Sub-Group 1</a></li> 
            <li><a href="#GroupCSub2">Sub-Group 2</a></li> 
           </ul> 
          </li> 
          <li><span>&nbsp</span></li> 
          <li> 
           <a class="back-to-top" href="#header">Back to top</a> 
          </li> 
         </ul> 
        </nav> 
       </div> 

Answer 1

मैं नहीं जानता कि कैसे ऐसा होता है .. लेकिन कुछ समय के लिए bootply साथ खेलने के बाद। मेरे पास एक फिक्स है

मुझे लगता है कि यह box-sizing:border-boxbootstrap.min.css (line 7) पर क्या कारण बनता है।

या तो इसे बदलना, या इसे box-sizing:content-box पर ओवरराइड करना इस समस्या को ठीक करने लगता है।

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

* { 
    box-sizing:content-box; 
} 

आशा है कि यह मदद करता है