Twitter Bootstrap 3 scrollspy가 작동하지 않습니다

bootstrap 3에서 scrollspy를 사용할 수 없습니다. 난 이미 stackoverflow의 답변을 포함하여 inumerous 포럼에서 읽은 모든 시도했지만 성공과 함께.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>

감사합니다! 건배!

편집 : 당신이 다음 URL에서 작동하지 않는 확인할 수 있습니다 http://zumuha.site40.net/bootstrap/examples/starter-template/

건배!

출처

2013-09-22 zumuha

무슨 일입니까? 어떻게 보이나요? – PSL

앵커 링크는 클릭 할 때 작동하지만 스크롤 할 때 #면 nav에서 업데이트되지 않습니다. – zumuha

콘솔에 오류가 표시됩니다. 당신은 필요한 스타일과 모든 것을 가지고 있습니까? 이것이 여기에서 작동하는지 확인하십시오 .. http://jsbin.com/azejOqA/1/ 및 http://jsbin.com/azejOqA/1/edit – PSL

요소 검사를 열고 #side-nav의 li을 보면 문제가 매우 명확합니다. 그들이 제공하는 클래스 .active에서 스타일을 스타일링해야합니다.

@PSL은 당신이 뭔가를 놓쳤다 고 말하면서 그들은 스타일이 적용된 .active 클래스를 제공한다고 말했습니다. 그러나 귀하의 웹 사이트를 기반으로, 요소 검사에서 스타일이 보이지 않습니다.

: 올바른 문제 해결이 CSS는 자신을 스타일링 할 것

(공식 압축 된 웹 사이트는 또한 bootstrap.css에서 .active 스타일이 나던, 그들은 스타일을 포함 사용자 정의 BS-doc.css에서 추가)

#side-nav > .nav > .active은 css입니다. 그것에 font-weight: bold;을 넣어보십시오.

전에도 이와 동일한 문제가 있었기 때문에 공식 압축 부트 스트랩 웹 사이트을 다운로드하여 변경하십시오. 여기 팁 : 버전이으로 변경되지 않아도 부트 스트랩이 많이 변경되므로 최신 CSS를 다운로드하여 사용해 볼 수도 있습니다.

출처

2013-09-23 00:31:02

잘못된 OP 문제는 CSS에서만 발생합니다. bootstrap js alread는 스크롤을 기반으로 활성 클래스를 추가합니다. 그는 그것을위한 스타일을 가지고 CSS를 사용해야합니다. – PSL

Perfect ... PSL에게 도움을 주셔서 감사합니다. – zumuha

그는 font-weight를 의미합니다.) –

Twitter Bootstrap 3 scrollspy가 작동하지 않습니다

답변

관련 문제