我正在尝试将 Bootstrap ScrollSpy 应用到我的词缀导航栏。我缺少一些东西，因为我认为我做的一切都是正确的。
这是我的代码:
<script type='text/javascript' src="//code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2">
<div id="sidebar">
<ul class="nav navbar-default affix">
<li><a href="#correct">Correct</a></li>
<li><a href="#incorrect">Incorrect</a></li>
<li><a href="#omission">Omission</a></li>
<li><a href="#premature">Premature</a></li>
</ul>
</div>
</div>
<div id="mycontent" class="col-md-10" data-spy="scroll" data-target="#sidebar">
<div id="correct" class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Correct responses</h3>
</div>
<div class="panel-body">
<h4>Graphic</h4>
<img src="/graph/group/post-op/lineerror/12/correct" onerror="imgError(this);">
<h4>Table</h4>
Table here
</div>
</div>
<div id="incorrect" class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Incorrect responses</h3>
</div>
<div class="panel-body">
<h4>Graphic</h4>
<img src="/graph/group/post-op/lineerror/12/incorrect" onerror="imgError(this);">
<h4>Table</h4>
Table here
</div>
</div>
<div id="omission" class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Omission responses</h3>
</div>
<div class="panel-body">
<h4>Graphic</h4>
<img src="/graph/group/post-op/lineerror/12/omission" onerror="imgError(this);">
<h4>Table</h4>
Table here
</div>
</div>
<div id="premature" class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Premature responses</h3>
</div>
<div class="panel-body">
<h4>Graphic</h4>
<img src="/graph/group/post-op/lineerror/12/premature" onerror="imgError(this);">
<h4>Table</h4>
Table here
</div>
</div>
</div>
</div>
</div>
我的链接和词缀工作正常，但我看不到滚动 spy 。
查看改编版jsfiddle here 。
最佳答案
"To easily add scrollspy behavior to your topbar navigation, add
data-spy="scroll"to the element you want to spy on (most typically this would be the<body>). Then add thedata-targetattribute with the ID or class of the parent element of any Bootstrap.navcomponent." -- docs.
那些data-必须将属性添加到正在滚动的任何元素。除非#mycontent是 overflow:scroll ，您需要添加那些 data-属性到您的<body>标签代替。
关于jquery - Bootstrap 3 Scrollspy 无法与 Affix 和 Panel 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20526728/