Bootstrap 4 Scrollspy 活动类没有改变答案

【问题标题】：Boostrap 4 Scroll Spy active class didn't changeBootstrap 4 Scrollspy 活动类没有改变
【发布时间】：2019-07-04 04:06:39
【问题描述】：

我的 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 中，我给出了切换按钮的徽标和图标。我也给扩展类和固定顶级类，但它仍然没有用。我的数据目标已经正确，它是 .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>
....

为什么活动类不想改变？在第二个代码块中有 href 部分。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

喂？您必须在样式表文件中添加一些 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>

【讨论】：

【解决方案2】：

哦，现在我得到了答案，“a”中的活动班级发生了变化，但我不知道为什么。所以'a'添加和删除活动类。

【讨论】：

我认为'li'中的活动班级发生了变化