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

时间:2016-06-01 22:34:28

标签: html5 twitter-bootstrap css3 scrollspy

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

1 个答案:

答案 0 :(得分:5)

您的<ul>遗失class="nav"

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

  • <nav class="navbar">
  • <ul class="nav"&GT;

你的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/