2017-07-04 65 views
1

我需要我的引導滾動設置的幫助。它突出了錯誤的div ID(總是最後一個)。任何人都可以幫助我嗎?Bootstrap滾動間諜突出顯示錯誤的編號

代碼:

內容:

<body style="heigt: 100%" data-spy="scroll" data-target="#side-menu"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <nav id="side-menu" class="col-xs-3 bs-docs-sidebar" data-gumshoe-header> 
      <ul class="nav nav-stacked fixed" data-gumshoe> 
       <li> 
        <a href="#GroupA">Group A</a> 
       </li> 
       <li> 
        <a href="#GroupB">Group B</a> 
       </li> 
       <li> 
        <a href="#GroupC">Group C</a> 
       </li> 
      </ul> 
     </nav> 
     <div class="col-md-9"> 
      <div id="GroupA"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    <br><br><br><br><br><br><br><br><br> 
    <div id="GroupB"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    <br><br><br><br><br><br><br><br><br> 
    <div id="GroupC"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
     </div> 
     </div> 
    </div> 
</body> 

//編輯:圖片Wrong thing

我使用的引導3.3.7和JQuery 2.2.4。

Regards

+0

看看我編輯的答案。問題是沒有足夠的空間來垂直滾動。隨着更多的內容在你的div,代碼正常工作。 也考慮在你的div上使用CSS'margin'而不是使用數百萬個'br' :) –

+0

我注意到你的'style =「heigt:100%」'而不是'style =「height:100%'' '身體'元素。 –

+0

@BartoszT在你的回答中添加你的最後評論,我會接受你的回答。就是這樣!謝謝! – Lars

回答

1

滾動元素應爲position: relative樣式。

編號:http://getbootstrap.com/javascript/#requires-relative-positioning

編輯

你div的高度是太小了。滾動區域是縮寫滾動間諜。

工作小提琴:https://jsfiddle.net/o93q4maf/

EDIT2

由於@Lars mentioned問題是一個錯字:style="heigt: 100%"代替style="height: 100%"在主體元素。

+0

我用'style =「position:relative;'替換'style =」height:100%'「 ''at'body'但它可以工作 – Lars

+0

你確定你已經包含了scrollspy.js插件嗎?我不知道你的標記似乎沒問題 –

+0

是的,scrollspy.js包含在bootstrap.min.js文件中,或者不是? – Lars