Bootstrap 3 Scrollspy不能與詞綴和麪板一起工作

我想將引導程序ScrollSpy應用到我的詞綴導航欄。我錯過了一些東西，因爲我認爲我已經做好了一切。Bootstrap 3 Scrollspy不能與詞綴和麪板一起工作

這裏是我的代碼：

 <script type='text/javascript' src="//code.jquery.com/jquery.js"></script> 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> 
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 

<div class="container"> 
     <div class="row"> 
      <div class="col-md-2"> 
       <div id="sidebar"> 
        <ul class="nav navbar-default affix"> 
         <li><a href="#correct">Correct</a></li> 
         <li><a href="#incorrect">Incorrect</a></li> 
         <li><a href="#omission">Omission</a></li> 
         <li><a href="#premature">Premature</a></li> 
        </ul> 
       </div> 
      </div> 


      <div id="mycontent" class="col-md-10" data-spy="scroll" data-target="#sidebar"> 

        <div id="correct" class="panel panel-primary"> 
         <div class="panel-heading"> 
          <h3 class="panel-title">Correct responses</h3> 
         </div> 
         <div class="panel-body">   
          <h4>Graphic</h4> 
           <img src="/graph/group/post-op/lineerror/12/correct" onerror="imgError(this);"> 
          <h4>Table</h4> 
           Table here 
         </div> 
        </div> 

        <div id="incorrect" class="panel panel-primary"> 
         <div class="panel-heading"> 
          <h3 class="panel-title">Incorrect responses</h3> 
         </div> 
         <div class="panel-body">   
          <h4>Graphic</h4> 
           <img src="/graph/group/post-op/lineerror/12/incorrect" onerror="imgError(this);"> 
          <h4>Table</h4> 
           Table here 
         </div> 
        </div> 

        <div id="omission" class="panel panel-primary"> 
         <div class="panel-heading"> 
          <h3 class="panel-title">Omission responses</h3> 
         </div> 
         <div class="panel-body">   
          <h4>Graphic</h4> 
           <img src="/graph/group/post-op/lineerror/12/omission" onerror="imgError(this);"> 
          <h4>Table</h4> 
           Table here 
         </div> 
        </div> 

        <div id="premature" class="panel panel-primary"> 
         <div class="panel-heading"> 
          <h3 class="panel-title">Premature responses</h3> 
         </div> 
         <div class="panel-body">   
          <h4>Graphic</h4> 
           <img src="/graph/group/post-op/lineerror/12/premature" onerror="imgError(this);"> 
          <h4>Table</h4> 
           Table here 
         </div> 
        </div> 
       </div> 
     </div>   
    </div>

我聯繫，我的詞綴工作正常，但我看不到scrollspy。

請參閱改編的jsfiddle here。

來源

2013-12-11 Wistar

「輕鬆地添加scrollspy行爲，你的頂欄導航，添加data-spy="scroll"到要窺探元素（最典型的是這將是<body>），然後與家長的ID或類中添加data-target屬性任何Bootstrap組件的元素「。 - docs。

那些data-屬性必須添加到哪個元素正在滾動。除非#mycontent爲overflow:scroll，否則您需要將這些data-屬性添加到<body>標記中。

http://jsfiddle.net/mblase75/qKFqg/

來源

2013-12-11 18:12:57 Blazemonger

我接着說：溢出：scroll'以'＃mycontent'，但它仍然無法正常工作。看到http://jsfiddle.net/J3bDZ/6 – Wistar

它工作正常，如果你添加''mycontent'高度'它是可滾動的。您還需要爲'active'元素指定樣式。（在你的小提琴中，jQuery在Bootstrap之後加載，所以沒有任何工作。）[fiddle]（http://jsfiddle.net/mblase75/qKFqg/） – Blazemonger

Bootstrap 3 Scrollspy不能與詞綴和麪板一起工作

回答

相關問題