无法弄清楚Bootstrap Scrollspy无法正常工作的原因

Question

无法弄清楚Bootstrap Scrollspy无法正常工作的原因

Har*_*ish 0 html5 css3 twitter-bootstrap scrollspy

我试图在我的网站上实现Bootstrap的滚动间谍,但它根本不起作用!我尝试了很多东西,但我无法让它发挥作用.我有很多自定义CSS应用于我的导航栏,所以我不确定这是否会影响任何东西.无论如何,这是我到目前为止:

HTML代码:

身体:

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

Run Code Online (Sandbox Code Playgroud)

导航栏:

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

Run Code Online (Sandbox Code Playgroud)

我网站的关于部分:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ton*_*cas 5

你`<ul>`失踪了`class="nav"`

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

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

你的css覆盖了bootstrap.css,但我认为你想要一个不同的导航类型.

如果您看一下这个小提琴:http: //jsfiddle.net/n9s3k0ys/2/,您会注意到当您浏览页面时导航器不会保持任何突出显示.

将nav类更改为navbar navbar-inverse navbar-fixed-top,你会看到更接近你想要的东西,但是...... http://jsfiddle.net/n9s3k0ys/3/

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

归档时间：	9 年，5 月前
查看次数：	365 次
最近记录：	9 年，5 月前

无法弄清楚Bootstrap Scrollspy无法正常工作的原因

你<ul>失踪了class="nav"

你的css覆盖了bootstrap.css,但我认为你想要一个不同的导航类型.

你`<ul>`失踪了`class="nav"`