为什么我的Bootstrap scrollspy无法工作？

Question

我是Bootstrap世界的新手，只是想制作一个简单的scrollspy。

<!DOCTYPE html>
<html>
<head>
    <title>Team Avero | Home</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/bootstrap.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar">
    <div class="container">
        <ul class="nav nav-tabs pull-left" id="navbar">
          <li class="active"><a href="#jumbotron">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Social Media</a></li>
        </ul>
        <ul class="nav nav-tabs pull-right">
          <li><a href="#">Avero Store</a></li>
          <li><a href="#">Forums</a></li>
        </ul>
    </div>

<div class="jumbotron">
    <div class="container">
        <h1>Team Avero</h1>
        <p>provides the best tools, services and more in the modding community. Guaranteed.</p>
    </div>
</div>

<div class="news">
    <div class="container">
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
    </div>
</div>
</body>
</html>

布局很好，但是当我单击导航中的“新闻”项时，它不会滚动到div类新闻。 怎么了？

Answer 1

您已指定<div class="news">它应为<div id="news">因为您已将#news用作定位标记。

＃代表ID和。 指班

Answer 2

尝试更换

 <ul id="navbar"> ... </ul>

至

 <div id="navbar"> <ul> ... </ul> </div>

为什么我的Bootstrap scrollspy无法工作？

问题描述

2 个解决方案

解决方案1
3 2015-05-26 11:50:50

解决方案2
0 2017-01-03 21:26:43

为什么我的Bootstrap scrollspy无法工作？

问题描述

2 个解决方案

解决方案1 3 2015-05-26 11:50:50

解决方案2 0 2017-01-03 21:26:43

解决方案1
3 2015-05-26 11:50:50

解决方案2
0 2017-01-03 21:26:43