0

我只是无法从 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/

干杯!

4

1 回答 1

3

如果您打开 Inspect Element 并查看#side-navs ，您的问题就很清楚了li。.active您需要在他们为您提供的类上设置样式。

@PSL 说你错过了一些东西，并说他们提供了一个风格化的.active课程。但是根据您的网站，我看不到 Inspect Element 中的样式。（官方的压缩网站也没有.activebootstrap.css 中的样式，他们在自定义的 bs-doc.css 中添加了包含该样式的样式）

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

这是#side-nav > .nav > .active在css中。试着在font-weight: bold;里面放一个。

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

于 2013-09-23T00:31:02.493 回答