Bootstrap scrollspy 活动选择器不工作

Question

我有一个简单的 bootstrap 3 scrollspy 问题，当我滚动 up/down 页面时 'active' li 标签没有被激活。关于 scrollspy 的其他一切都按预期工作。

我已经看到所有其他与此相关的堆栈溢出问题，并在 jsfiddle 中试验了大约两个小时但没有任何进展。

使用开发工具和设置以及 li 到 :active 手动显示所需的效果。

HTML

  <header>
    <nav class="navbar navbar-default navbar-fixed-top" id="spy-navbar">
      <div class="container text-center">
        <ul class="nav navbar-nav inline">
          <li> <a href="#one" class="smooth-scroll">ONE</a> </li>
          <li> <a href="#two" class="smooth-scroll">TWO</a> </li>
          <li> <a href="#three" class="smooth-scroll">THREE</a> </li>
          <li> <a href="#four" class="smooth-scroll">FOUR</a> </li>
        </ul>
      </div>
    </nav>
  </header>

  <main class="container">
    <article id="one">one</article>
    <article id="two">two</article>
    <article id="three">three</article>
    <article id="four">four</article>
  </main>

</body>

CSS

li > a:hover,
li:active {
  border-bottom: 2px solid #2d9fff;
}

我的 jsfiddle link 位于此处： https://jsfiddle.net/hswg5j3q/

任何人都可以查看我的 jsfiddle，看看我缺少什么吗？非常感谢。

Answer 1

这是因为您的 fiddle 不包括 bootstrap.js。 ScrollSpy组件需要JS。

正在使用 Bootply： http://bootply.com/wJHL1Vqpdi

Bootstrap scrollspy 活动选择器不工作

Bootstrap scrollspy active selector not working

css

twitter-bootstrap

scrollspy