Bootstrap中的滚动监听（Scrollspy）的使用

最近学习Bootstrap的时候，看到官方的手册里面有一个效果是这样的

 这个页面的效果就是左边的导航栏是不会滚动的，右边的会滚动，然后右边内容出现时，左边对应的那个导航就会变成蓝色，但是官方给的代码，我把它粘贴到自己的页面里面的时候会发现，效果和他展示的并不一样

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#item-1">Item 1</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
          <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
        </nav>
      </nav>
    </nav>
  </div>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

 我们粘贴出来的效果，我们会发现，左边和右边会一起滚动，并没有分开，我就感觉很奇怪，然后找了很久之后发现，我们需要给右边的部分添加高度限制和overflow

具体加在哪里呢？我们知道这段代码里面，这两行是有一个对应关系的，第一行说明自己是导航栏，画线的第二行是表明自己是被监控的部分，我们就给第二行这个标签设置下面这个style就可以了，这个style是说明，我们这个div限制了高度为500px，超过500px的地方就有滚动条

style="height: 500px; overflow-y: scroll;"

 我也是初学，不是很懂，如果我的贴子里面有错误，希望可以指出。