Question

我无法从bootstrap 3获取scrollspy工作。我已经尝试过从众多论坛中读到的所有内容，包括stackoverflow的答案，但没有成功。

因此，如果有人能够查看此代码并提供帮助，那就太棒了。

以下是代码：

<!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/

干杯！

Answer 1

如果您打开Inspect Element并查看#side-nav的{{1}}，则问题非常清楚。您需要在他们为您提供的li课程上设置样式。

@PSL说你错过了什么，并说他们提供了一个风格.active课程。但根据您的网站，我没有在Inspect Element中看到这种风格。（官方压缩网站也没有bootstrap.css中的.active样式，它们添加了自定义的bs-doc.css，其中包括样式）

正确的故障排除方法是自行设置css样式：

css中的.active。尝试在其中添加#side-nav > .nav > .active。

之前我遇到过同样的问题，所以我建议您下载官方压缩的bootstrap网站并对其进行更改。这里有一个提示：即使版本没有改变，Bootstrap也会改变很多，所以你也可以下载最新的css并试试。

Twitter Bootstrap 3 scrollspy不起作用

1 个答案: