带有列表组的引导程序4 ScrollSpy不工作

我在努力实现 Scrollspy with list group 在Bootstrap 4中,但它不起作用。滚动内容包含 data-spy="scroll" data-target="#fixed-menu" data-offset="0" 菜单包含 id="fixed-menu" .

这里是 jsfiddle

HTML

<main class="Site-content">
  <div class="view">
    <div class="container-full">
      <div class="row ml-1">
        <div className="col col-10 ml-1" data-spy="scroll" data-target="#fixed-menu" data-offset="0">
        <h3>Create</h3>
        <div id="main1" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main1</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        <div id="main2" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main2</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        <div id="main3" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main3</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        <div id="main4" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main4</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        </div>
        <div
       id="fixed-menu"
       class="list-group fixedMenu"
       >
              <a class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3" href="#main1">
                Main1
              </a>
              <a class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3" href="#main2">
                Main2
              </a>
              <a
                class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3"
                href="#main3"
              >
                Main3
              </a>
              <a
                class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3"
                href="#main4"
              >
                Main4
              </a>
            </div>
      </div>
    </div>
  </div>
</main>

CSS

.Site-content{
  flex: 1;
}

.fixedMenu{
  width: 110px;
  position: fixed;
  right: 0;
}