Twitter Bootstrap 3 scrollspy將無法正常工作

我只是無法從引導程序3獲得scrollspy工作。我已經嘗試了一些我從衆多論壇讀取的東西，包括stackoverflow的答案，但沒有成功。Twitter Bootstrap 3 scrollspy將無法正常工作

所以，如果任何人都可以看看這個代碼，並幫助這將是偉大的。

下面的代碼：

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
     <link rel="shortcut icon" href="../../assets/ico/favicon.png"> 

     <title>Starter Template for Bootstrap</title> 

     <!-- Bootstrap core CSS --> 
     <link href="../../dist/css/bootstrap.css" rel="stylesheet"> 

     <!-- Custom styles for this template --> 
     <link href="starter-template.css" rel="stylesheet"> 

     <style type="text/css"> 
      body { 
      text-align: center; 
      } 

      #one, #two, #three, #four { 
      height: 800px; 
      } 

     </style> 

     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
     <!--[if lt IE 9]> 
      <script src="../../assets/js/html5shiv.js"></script> 
      <script src="../../assets/js/respond.min.js"></script> 
     <![endif]--> 
     </head> 

     <body data-spy="scroll" data-target="#side-nav" data-offset="0"> 

    <nav id="side-nav"> 
     <ul class="nav nav-list affix"> 
      <li><a href="#one">one</a></li> 
      <li><a href="#two">two</a></li> 
      <li><a href="#three">three</a></li> 
      <li><a href="#four">four</a></li> 
     </ul> 
    </nav> 

     <section id="one">one section</section> 
     <section id="two">two section</section> 
     <section id="three">three section</section> 
     <section id="four">four section</section> 


     </body> 



     <!-- Bootstrap core JavaScript 
     ================================================== --> 
     <!-- Placed at the end of the document so the pages load faster --> 
     <script src="../../assets/js/jquery.js"></script> 
     <script src="../../dist/js/bootstrap.min.js"></script> 


     </body> 
    </html>

在此先感謝！乾杯！

編輯：您可以檢查它不是在以下網址工作： http://zumuha.site40.net/bootstrap/examples/starter-template/

乾杯！

來源

2013-09-22 zumuha

發生了什麼？它看起來如何？ – PSL

錨鏈接點擊工作，但當我滾動時，它不會更新＃side-nav中它應該。 – zumuha

你是否看到控制檯中的任何錯誤。你確定你有所需的樣式和一切。檢查它在這裏工作.. http://jsbin.com/azejOqA/1/和http://jsbin.com/azejOqA/1/edit – PSL

如果您打開檢查元素並查看#side-nav的li s，則問題非常明確。你需要在他們提供的.active課程上設計風格。

@PSL說你錯過了什麼，並說他們提供了一個風格.active類。但基於你的網站，我沒有看到Inspect Element的風格。

（官方網站壓縮也這麼想的有bootstrap.css的.active風格，他們在自定義的BS-doc.css其中包括風格添加）正確的故障排除會造型的CSS自己：

這是在css中的#side-nav > .nav > .active。嘗試在其中放入一個font-weight: bold;。

我以前有過這個相同的問題，所以我會建議你下載官方壓縮引導程序網站並改變他們。這裏的提示：即使版本不變，Bootstrap也會有很大的變化，所以你也可以下載最新的CSS並嘗試。

來源

2013-09-23 00:31:02

不正確的OP的問題只與CSS。 bootstrap js alread基於滾動添加活動類。他需要使用具有該樣式的css。 – PSL

完美... 感謝PSL的幫助。 – zumuha

他的字體重量;） –

Twitter Bootstrap 3 scrollspy將無法正常工作

回答

相關問題