Twitter Bootstrap 3 scrollspy не работает

Я просто не могу получить scrollspy из bootstrap 3 для работы. Я уже пробовал все, что я читал на многочисленных форумах, включая ответы 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>

Спасибо заранее !! Приветствия!

EDIT: вы можете проверить это НЕ работает в следующем URL: 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

Ваша проблема очень ясна, если вы откроете Inspect Element и посмотрите на #side-nav's li s. Вам нужно стилизовать стиль на классе .active, который они вам предоставляют.

@PSL сказал, что вы что-то пропустили и сказали, что они предоставляют класс .active. Но на основе вашего веб-сайта я не вижу стиль в Inspect Element. (Официальный сайт Молнии также dosen't имеют .active стиль в bootstrap.css, они добавили в пользовательских BS-doc.css который включал стиль)

Правильный поиск неисправностей будет стилизации CSS самостоятельно:

Который #side-nav > .nav > .active в css. Попробуйте поставить font-weight: bold;.

У меня была эта же проблема раньше, поэтому я бы порекомендовал вам скачать официальный сайт zip bootstrap и изменить на них. A tip здесь: Bootstrap меняет многое, даже если версия не изменяется, поэтому вы также можете скачать новейшие css и попробовать.

источник

2013-09-23 00:31:02

Неправильная проблема с OP связана только с css. bootstrap js alread добавляет активный класс на основе прокрутки. Ему нужно использовать css, для которого есть стили. – PSL

Perfect ... Спасибо PSL за помощь. – zumuha

Он имеет в виду шрифт-вес;) –

Twitter Bootstrap 3 scrollspy не работает

ответ

Смежные вопросы