我的 HTML:
<body data-spy="scroll" data-target=".dmu-top-nav" data-offset="50">
<header>
<nav class="navbar navbar-toggleable-sm navbar-expand-md dmu-top-nav fixed-top" role="navigation">
<div class="container-fluid">
<div class="dmu-nav-wrapper">
<div class="navbar-header">
<a class="navbar-brand" href="#home">
<img src="img/220px-Logo__lowres.png" width="30" height="30" alt="logo">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#dmu-nav-menu" aria-controls="dmu-nav-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
在上面的 HTML 中，我为切换按钮提供了 Logo 和图标。我也给了 expand class 和 fixed top class，但是还是不行。我的数据目标已经正确，它是 .dmu-top-nav。
<div id="dmu-nav-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news">Upcoming</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#staff">Lecture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#student">Alumni</a>
</li>
</ul>
....
</header>
....
为什么active类不想改变？在第二个代码块中有 href 部分。
最佳答案
嗨？你必须在你的样式表文件中添加一些 CSS，这里是代码
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-scroller .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
}
.card-img-right {
height: 100%;
border-radius: 0 3px 3px 0;
}
.flex-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.h-250 { height: 250px; }
@media (min-width: 768px) {
.h-md-250 { height: 250px; }
}
这是HTML代码
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 text-muted" href="#">World</a>
<a class="p-2 text-muted" href="#">U.S.</a>
<a class="p-2 text-muted" href="#">Technology</a>
<a class="p-2 text-muted" href="#">Design</a>
<a class="p-2 text-muted" href="#">Culture</a>
<a class="p-2 text-muted" href="#">Business</a>
<a class="p-2 text-muted" href="#">Politics</a>
<a class="p-2 text-muted" href="#">Opinion</a>
<a class="p-2 text-muted" href="#">Science</a>
<a class="p-2 text-muted" href="#">Health</a>
<a class="p-2 text-muted" href="#">Style</a>
<a class="p-2 text-muted" href="#">Travel</a>
</nav>
</div>
关于html - Bootstrap 4 Scrollspy 事件类没有改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54617410/