Bootstrap 4 scroll-spy 不工作

Question

我正在尝试将 Bootstrap 4 scrool-spy 添加到我的设计中，但它不起作用。我已经添加了手册中所说的所有内容，并且正在检查其他问题，但我无法弄清楚。

我的代码：

    <body>
<div id="test">
      <nav  class="navbar  navbar-default navbar-toggleable bg-faded navbar-light fixed-top" id="navbar" > 
            <a class="navbar-brand" href="#">
                <img src="../media/logo.png" class=" align-top" alt="">
            </a>
         <div class="nav-links collapse navbar-collapse col-lg-10 col-md-10 col-sm-9 col-xs-12" id="collapseNav">
              <ul class="navbar-nav" >
                <li class="nav-item">
                        <a  class="" id="title_boutTheCompany" href="#link-aboutTheCompany">Company</a>
                </li>
                <li class="nav-item">
                        <a  class="" href="#link-staff" id="title_Team">Team</a>
                </li>
                <li class="nav-item">
                        <a class="" href="#link-contacts" id="title_Contact">Contacts</a>
                </li>
                <li class="nav-item dropdown" style="border: none;">
                        <a  class="" href="#link-freeTime" id="title_freeTime">Free Time</a>
                </li>
              </ul>
          </div>


      <div class="navBtn d-sm-none">
            <button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-target="#collapseNav" aria-controls="collapseNav" aria-expanded="false" aria-label="Toggle navigation" id="toogleIcon">
                   <span class="fa fa-angle-down my-toggler" id="faToggler"></span>
            </button>
       </div>
</nav>
</div>

 <div class="anchor"></div>
  <div class="anchor" id="link-aboutTheCompany" ><h1>Company</h1></div>
  <div class="anchor" id="link-staff"><h1>Team</h1></div>
  <div class="anchor" id="link-freeTime"><h1>free time</h1></div>
  <div class="anchor" id="link-contacts"><h1>Contacts</h1></div>
</body>

我的js：

`$('body').scrollspy({ target: '#test' });`

我的fiddle： https://jsfiddle.net/cm5ftLq1/1/

Answer 1

在将正确的 "nav-link" class 添加到 a 元素后，jsfiddle 对我有用：

<a class="nav-link" href="#link-staff" id="title_Team">Team</a>

并按正确顺序排列联系人和空闲时间 div：

<div class="anchor" id="link-contacts"><h1>Contacts</h1></div>
<div class="anchor" id="link-freeTime"><h1>free time</h1></div>

Bootstrap 4 scroll-spy 不工作

Bootstrap 4 scroll-spy not working

twitter-bootstrap

scrollspy