twitter-bootstrap Bootstrap Scrollspy 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15288285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Scrollspy is not working
提问by Matt Altepeter
I am trying to implement a fixed side menu that updates the active page link with the active class. I placed the scroll spy HTML5 elements on the body, but I am having issues. Can someone check out my page and see if they can determine what's wrong?
我正在尝试实现一个固定的侧边菜单，用活动类更新活动页面链接。我在主体上放置了滚动间谍 HTML5 元素，但我遇到了问题。有人可以查看我的页面，看看他们是否可以确定出了什么问题吗？
回答by Shail
The issue is that you have placed your nav inside a div and than using the nav id to the scroll. In order To make the scrollspy to work You can assign "side-nav" to the span3 div like : Jsfiddle demo in browser
问题是您已将导航放在 div 中，而不是将导航 id 用于滚动。为了使scrollspy工作您可以将“side-nav”分配给span3 div，例如：浏览器中的Jsfiddle演示
<div class="row">
<div class="span3" id="side-nav">
<ul class="nav nav-list about-list hidden-phone hidden-tablet affix" >
<li class="active"><a href="#about"><i class="icon-chevron-right"></i> About Me</a></li>
<li><a href="#education"><i class="icon-chevron-right"></i> Education</a></li>
<li><a href="#work"><i class="icon-chevron-right"></i> Work Experience</a></li>
<li ><a href="#sports"><i class="icon-chevron-right"></i> Sports</a></li>
</ul>
</div>
You can create your para section in the following way :
您可以通过以下方式创建您的 para 部分：
<div class="page-header" id="about">
<h1 >About Me</h1>
<p>My name is Matt Altepeter. I am 21 years old .</p>
</div>
Please remove the script to initialize scrolling , since you have already added them to body
请删除脚本以初始化滚动，因为您已经将它们添加到正文
<body data-offset="50" data-target="#side-nav" data-spy="scroll">
Its good practice to declare bootstrap.js just after the jquery and before any other script . Put all your script in footer , helps save loading time .
在 jquery 之后和任何其他脚本之前声明 bootstrap.js 是一种很好的做法。将所有脚本放在页脚中，有助于节省加载时间。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
