Javascript 带列表组的引导4 scrollspy不'；行不通

我试图在Bootstrap4中实现，但它不起作用。滚动内容包含

data spy=“Scroll”data target=“#fixed menu”data offset=“0”

和菜单包含

id=“fixed menu”

这是

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>

如中所示，在scrollspy元素的父级上使用适当的数据属性

---

你能把它写下来作为一个答案吗？我可以接受它并结束这个问题。谢谢，我确实这样做了：

当监视除的元素时，请确保设置了高度并溢出-y:scroll；已应用。

.Site-content{
  flex: 1;
}

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