Question

Here is the codepen, clearly a work in progress.

我已经多次写过并重写了相关部分。从文档中可以看出，所有需要到位的是身体位置在CSS中相对而导航栏是目标，然后链接需要对应于不同的部分ID。所有这一切都已到位，但链接没有得到＆＃34;活跃＆＃34;滚动部分时的类。

我错过了什么？提前谢谢。

HTML：

<nav class='navbar sticky-top navbar-expand-md navbar-dark bg-primary'>
  <div class='container'>
    <span class='navbar-brand h1 mb-0'>Ned Redmond</span>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navigation" aria-controls="Navigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="Navigation">
      <ul class="navbar-nav nav-pills ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#aboutMe">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contactMe">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Résumé</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<section id='portfolio'>
  // CONTENT //
</section>
<section id='aboutMe'>
  // CONTENT //
</section>
<section id='contactMe'>
  // CONTENT //
</section>

CSS：

/* to activate scrollspy */
body {
  position: relative;
}

/* theming, adjustments */
.bg-primary {
  background-color: #16161d !important;
}
.nav-pills .active {
  background-color: #505069 !important;
}
#aboutMe {
  background-color: #F2F4F3 !important;
}
#portfolio .row {
  padding-top: 30px;
}
section {
  padding-bottom: 30px;
}

JSS：

$('body').scrollspy({
    target: '.navbar',
    offset: 0
  });

Answer 1

这是一个不包括所有适当库的简单问题。如果您访问检查器或开发人员控制台，您将看到CodePen中与您不包括Popper.js相关的一系列错误

Bootstrap 4利用这个库来处理涉及移动的所有内容：

http://getbootstrap.com/docs/4.0/getting-started/introduction/#js

在jQuery和Bootstrap JS之间包含Popper.js后，所有内容都按预期工作。

我还要指出您目前正在使用4.0.0-beta进行Bootstrap，但截至12/28/17的当前版本为4.0.0-beta.2（即将推出测试版3）。更新include以反映最新的Bootstrap构建可能会提供其他功能。

Bootstrap 4 beta scrollspy无法正常运行

1 个答案: