Twitter Bootstrap 3 scrollspy won't work

StackOverflow https://stackoverflow.com/questions/18949937

Frage

I just can't get scrollspy from bootstrap 3 to work. I've already tried everything i've read from inumerous forums, including stackoverflow's answers, but with no success.

So if anyone could look at this code and help that would be great.

Here's the code:

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

Thanks in advance!! Cheers!

EDIT: you can check it NOT working in the following URL: http://zumuha.site40.net/bootstrap/examples/starter-template/

Cheers!

War es hilfreich?

Lösung

Your problem is very clear if you open Inspect Element and look at the #side-nav's lis. You need to style the style on the .active class they provide you.

@PSL said you missed something and said they provide a styled .active class. But based on your website, I don't see the style in Inspect Element. (The official zipped website also dosen't have the .active style in bootstrap.css, they added in a custom bs-doc.css which included the style)

The correct troubleshooting would be styling the css yourself:

Which is #side-nav > .nav > .active in css. Try to put a font-weight: bold; in it.

I had this same problem before, so I would recommend you to download the official zipped bootstrap website and change upon them. A tip here: Bootstrap change a lot even though the version doesn't change, so you can also download the newest css and try.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top