Question

我的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的部分。

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

Answer 2

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

Boostrap 4 Scroll Spy活动类别没有改变

2 个答案: