无法弄清楚为什么 Bootstrap Scrollspy 不工作

Question

我正在尝试在我的网站上实施 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>

我网站的关于部分：

<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;
}

Answer 1

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

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

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

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

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

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

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

无法弄清楚为什么 Bootstrap Scrollspy 不工作

Can't figure out why Bootstrap Scrollspy isn't working

html

css

twitter-bootstrap

scrollspy

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

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

无法弄清楚为什么 Bootstrap Scrollspy 不工作

Can't figure out why Bootstrap Scrollspy isn't working

html

css

twitter-bootstrap

scrollspy

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

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

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