【问题标题】：Can't figure out why Bootstrap Scrollspy isn't working无法弄清楚为什么 Bootstrap Scrollspy 不起作用
【发布时间】：2016-06-01 22:34:28
【问题描述】：

我正在尝试在我的网站中实现 Bootstrap 的滚动间谍，但它根本不起作用！我已经尝试了很多东西，但我无法让它发挥作用。我有很多自定义 CSS 应用于我的导航栏，所以我不确定这是否会影响任何事情。无论如何，这就是我目前所拥有的：

HTML 代码：

正文：

<body id="home" data-spy="scroll" data-target=".navbar" data-offset="0">

导航栏：

<nav id="navbar" class="navbar navbar-lg navbar-fixed-top hidden-xs-down">
    <!-- Navbar content -->
    <ul class="navul">
        <li class="nav-item navitem"><a class="nav-link navhref" href="#home">Home</a></li>
        <li class="navitem"><a class="navhref" href="#about">About</a></li>
        <li class="navitem"><a class="navhref" href="#projects">Projects</a></li>
        <li class="navitem"><a class="navhref" href="#contact">Contact</a></li>
    </ul>
    <h2>Harish</h2>
 </nav>

我网站的 about 部分：

<div class="sections container-fluid">
    <h1 id="about" class="section-heading">About</h1>
    <img class="about-img" src="img/Harish.jpeg" alt="Harish's Picture">
    <p class="paragraph">Text about me.</p>
</div>

CSS 代码： （以防某些样式可能会干扰 Bootstrap 的 Scrollspy。）

/*Navbar*/

.navbar {
  background-color: #009Fff;
  color: #fff;
}

.navbar-lg {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  padding: 0;
}

.navbar-lg ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  margin-right: auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
}

.navbar-lg ul li {
  margin: 0;
}

.navbar-lg h2 {
  padding: 0;
  vertical-align: center;
  font-family:  'Helvetica Neue', 'Raleway', 'arial', sans-serif;
  font-size: 1.5rem;
  vertical-align: center;
  margin: 1.5rem;
  font-weight: 400;
}

.navul {
  width: 100%;
  display: block;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style-type: none;
  padding-left: 0;
}

.navitem {
  display: block;
  margin: auto;
  padding: 0.75rem;
  text-align: center;
  color: #fff;
  font-family: 'Raleway', 'Helvetica Neue', 'arial', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
}

.navhref {
  color: #fff;
}

.navhref {
  text-decoration: none !important;
}

.navhref:visited {
  color: #fff;
}

.navitem:hover,
.navhref:hover {
  color: #007Bc6;
}

.navlinks {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #009Fff;
}

【问题讨论】：

body 标记中的 data-target 是一个类（即.navbar），它应该引用 id（即#navbar） - 你能改变它，看看是否有效吗？
@ochi 感谢您的回复 :)。我实际上尝试了 id 和 class 选择器，但没有任何区别。

标签： html twitter-bootstrap css scrollspy

【解决方案1】：

您的`<ul>` 丢失了`class="nav"`

两个元素都有一个必需的类名：

<nav class="navbar">
<ul class="nav">

您的 css 覆盖了 bootstrap.css，但我认为您需要不同的导航类型。

如果你看看这个小提琴： http://jsfiddle.net/n9s3k0ys/2/，您会注意到导航不会在您浏览页面时保持任何突出显示。

将导航类更改为navbar navbar-inverse navbar-fixed-top 后，您会看到更接近您想要的内容，但是... http://jsfiddle.net/n9s3k0ys/3/

删除 CSS 后，一切都变得更加清晰： http://jsfiddle.net/n9s3k0ys/4/

【讨论】：

感谢您的回复！然而，只有一个问题。我应该在其中添加 class= "nav" 吗？ <ul class="naval nav"> 我已经尝试过了，但由于某种原因它仍然无法正常工作。除了导致此错误的缺少的类名之外，您是否认为这是我的 CSS 中的某些内容？对不起，如果我的问题真的很基本......我对 html 和 css 很陌生，而且我来自 swift/objective-c 背景。
你是完全正确的，在这两个方面（<ul class="naval nav"> 并且你的 css 正在破坏导航），再加上一个问题......你的 css 正试图将导航构建成一个水平菜单，但是hidden-xs-down 也与 scrollSpy 导航和你的一些 css 相冲突。请仔细看看我发给你的小提琴，特别是 v3 jsfiddle.net/n9s3k0ys/3 和 v4 jsfiddle.net/n9s3k0ys/4。如果您从版本 4 开始，并进行小的迭代 css 更改以获得您想要的外观和感觉，您最终会得到您正在寻找的东西。
嘿，再次感谢您的帮助，hidden-xs-down 用于哪种导航类型？
我打错了，但请纠正我的评论。你看过jsfiddle.net/n9s3k0ys/4吗？
是的，我将尝试缩小范围并使其正常工作。非常感谢您的宝贵时间！

您的&lt;ul&gt; 丢失了class="nav"

您的 css 覆盖了 bootstrap.css，但我认为您需要不同的导航类型。

您的`<ul>` 丢失了`class="nav"`