使一列中的列表组滚动，页面与较长的另一列对齐

Question

给定 bootstrap 中的两列 - 即 col-4 和 col-8，较小的列包含列表组（导航），第二列包含内容，如何使列表组保持固定在该列中的位置（即垂直对齐）当第 8 列中的内容与页面正常向下滚动时。

我还认为这很难实现响应式，那么替代解决方案是什么？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="row mb-5 p-4 pb-0 pe-lg-0 pt-lg-5r">
  <div class="col-4 py-5 px-5">
    <div class="card" id="scrollSpyList">
      <div class="card-header">
        Header
      </div>
      <div class="card-body subheader">
        Category 1
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item1">Item 1</a>
        <a class="list-group-item list-group-item-action" href="#item2">Item 2</a>
        <a class="list-group-item list-group-item-action" href="#item3">Item 3</a>
        <a class="list-group-item list-group-item-action" href="#item4">Item 4</a>
      </ul>
      <div class="card-body subheader">
        Category 2
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item5">Item 5</a>
        <a class="list-group-item list-group-item-action" href="#item6">Item 6</a>
      </ul>
      <div class="card-body subheader">
        Category 3
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item7">Item 7</a>
        <a class="list-group-item list-group-item-action" href="#item8">Item 8</a>
      </ul>
    </div>
  </div>
  
  <div class="col-8 py-5 px-5" data-bs-spy="scroll" data-bs-target="#scrollSpyList" data-bs-smooth-scroll="true" tabindex="0">
    <h2 class="mb-5 text-uppercase" id="item1">Item 1</h2>
    <p class="lead">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat massa id feugiat suscipit. Maecenas ultricies pellentesque risus, at placerat augue efficitur eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
      cubilia curae; Mauris vel nisl finibus, dapibus est eget, efficitur lacus. Donec et pharetra mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porttitor vehicula mi, sit amet bibendum
      ligula suscipit sit amet. Nam iaculis tellus nisi, vitae pulvinar justo suscipit sed. In interdum mollis libero, at pretium ante pretium vitae. Donec posuere venenatis mauris tempus varius. Nullam cursus iaculis lacus, non tincidunt tortor varius
      ut.
    </p>

    <h2 class="my-5 text-uppercase" id="item2">Item 2</h2>
    <p class="lead">
      Aenean porttitor sollicitudin neque ac lacinia. Vestibulum pharetra nulla a augue venenatis blandit sed sed ipsum. Pellentesque dictum lacus ac turpis feugiat sollicitudin. Sed consequat eros at lacus volutpat gravida. Vestibulum ante ipsum primis in
      faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum facilisis sem dui, ut mattis lacus commodo sit amet. Nulla id vehicula purus. Fusce at nisl bibendum, viverra urna in, rutrum augue. Phasellus malesuada iaculis bibendum. Cras ex
      urna, gravida eget nibh non, consectetur ultrices ligula. Mauris sit amet libero interdum, imperdiet odio sit amet, volutpat mauris. Nulla molestie consequat mauris, nec pretium dui sollicitudin eu. Sed non blandit nisl. Etiam tempor nunc at porttitor
      egestas. Sed gravida eget erat nec scelerisque. Fusce mattis mauris at faucibus congue. Sed sodales consequat felis, ut tristique est sagittis sed. Praesent nibh neque, posuere nec purus ac, convallis varius velit. Duis molestie viverra metus vitae
      fringilla. Aliquam consequat blandit massa. Pellentesque auctor aliquet pretium. Suspendisse ut massa vel risus maximus molestie.
    </p>

    <h2 class="my-5 text-uppercase" id="item3">Item 3</h2>
    <p class="lead">
      Nullam lacinia tellus at elit laoreet, non condimentum nisl sodales. Nullam velit nisi, interdum at purus eu, lacinia facilisis felis. Mauris imperdiet imperdiet nibh, vitae placerat elit fermentum interdum. Morbi cursus non ex non sodales. Nunc sed molestie
      libero, a luctus mi. Vivamus maximus velit facilisis porttitor hendrerit. Duis nulla sem, suscipit sed posuere ut, mollis eget turpis. In at porta purus, in facilisis urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc mauris libero, convallis vitae tincidunt non, ornare a eros. Praesent lobortis ipsum eget nibh feugiat sollicitudin. In condimentum
      eros odio, in imperdiet ante lobortis sed. Vestibulum purus erat, pellentesque eu pulvinar non, tempor sed sapien. Phasellus vel nunc id orci venenatis luctus sed eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos.
    </p>

    <h2 class="my-5 text-uppercase" id="item4">Item 4</h2>
    <p class="lead">
      Nullam non nibh sed arcu eleifend aliquam eu ac purus. Sed lobortis vel lacus a porta. Donec in consectetur nisl. Suspendisse faucibus elit ac rutrum convallis. Proin mattis ante ut diam commodo egestas. Cras consequat luctus orci, scelerisque scelerisque
      purus pretium eu. Nullam erat eros, gravida sit amet eros id, mattis tempus lacus.
    </p>
    <hr class="my-5" style="width: 100%;" />
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Answer 1

https://getbootstrap.com/docs/5.3/helpers/position/#sticky-top

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="row mb-5 p-4 pb-0 pe-lg-0 pt-lg-5r">
  <div class="col-4 py-5 px-5">
    <div class="card sticky-top" id="scrollSpyList">
      <div class="card-header">
        Header
      </div>
      <div class="card-body subheader">
        Category 1
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item1">Item 1</a>
        <a class="list-group-item list-group-item-action" href="#item2">Item 2</a>
        <a class="list-group-item list-group-item-action" href="#item3">Item 3</a>
        <a class="list-group-item list-group-item-action" href="#item4">Item 4</a>
      </ul>
      <div class="card-body subheader">
        Category 2
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item5">Item 5</a>
        <a class="list-group-item list-group-item-action" href="#item6">Item 6</a>
      </ul>
      <div class="card-body subheader">
        Category 3
      </div>
      <ul class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action" href="#item7">Item 7</a>
        <a class="list-group-item list-group-item-action" href="#item8">Item 8</a>
      </ul>
    </div>
  </div>
  
  <div class="col-8 py-5 px-5" data-bs-spy="scroll" data-bs-target="#scrollSpyList" data-bs-smooth-scroll="true" tabindex="0">
    <h2 class="mb-5 text-uppercase" id="item1">Item 1</h2>
    <p class="lead">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat massa id feugiat suscipit. Maecenas ultricies pellentesque risus, at placerat augue efficitur eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
      cubilia curae; Mauris vel nisl finibus, dapibus est eget, efficitur lacus. Donec et pharetra mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porttitor vehicula mi, sit amet bibendum
      ligula suscipit sit amet. Nam iaculis tellus nisi, vitae pulvinar justo suscipit sed. In interdum mollis libero, at pretium ante pretium vitae. Donec posuere venenatis mauris tempus varius. Nullam cursus iaculis lacus, non tincidunt tortor varius
      ut.
    </p>

    <h2 class="my-5 text-uppercase" id="item2">Item 2</h2>
    <p class="lead">
      Aenean porttitor sollicitudin neque ac lacinia. Vestibulum pharetra nulla a augue venenatis blandit sed sed ipsum. Pellentesque dictum lacus ac turpis feugiat sollicitudin. Sed consequat eros at lacus volutpat gravida. Vestibulum ante ipsum primis in
      faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum facilisis sem dui, ut mattis lacus commodo sit amet. Nulla id vehicula purus. Fusce at nisl bibendum, viverra urna in, rutrum augue. Phasellus malesuada iaculis bibendum. Cras ex
      urna, gravida eget nibh non, consectetur ultrices ligula. Mauris sit amet libero interdum, imperdiet odio sit amet, volutpat mauris. Nulla molestie consequat mauris, nec pretium dui sollicitudin eu. Sed non blandit nisl. Etiam tempor nunc at porttitor
      egestas. Sed gravida eget erat nec scelerisque. Fusce mattis mauris at faucibus congue. Sed sodales consequat felis, ut tristique est sagittis sed. Praesent nibh neque, posuere nec purus ac, convallis varius velit. Duis molestie viverra metus vitae
      fringilla. Aliquam consequat blandit massa. Pellentesque auctor aliquet pretium. Suspendisse ut massa vel risus maximus molestie.
    </p>

    <h2 class="my-5 text-uppercase" id="item3">Item 3</h2>
    <p class="lead">
      Nullam lacinia tellus at elit laoreet, non condimentum nisl sodales. Nullam velit nisi, interdum at purus eu, lacinia facilisis felis. Mauris imperdiet imperdiet nibh, vitae placerat elit fermentum interdum. Morbi cursus non ex non sodales. Nunc sed molestie
      libero, a luctus mi. Vivamus maximus velit facilisis porttitor hendrerit. Duis nulla sem, suscipit sed posuere ut, mollis eget turpis. In at porta purus, in facilisis urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc mauris libero, convallis vitae tincidunt non, ornare a eros. Praesent lobortis ipsum eget nibh feugiat sollicitudin. In condimentum
      eros odio, in imperdiet ante lobortis sed. Vestibulum purus erat, pellentesque eu pulvinar non, tempor sed sapien. Phasellus vel nunc id orci venenatis luctus sed eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos.
    </p>

    <h2 class="my-5 text-uppercase" id="item4">Item 4</h2>
    <p class="lead">
      Nullam non nibh sed arcu eleifend aliquam eu ac purus. Sed lobortis vel lacus a porta. Donec in consectetur nisl. Suspendisse faucibus elit ac rutrum convallis. Proin mattis ante ut diam commodo egestas. Cras consequat luctus orci, scelerisque scelerisque
      purus pretium eu. Nullam erat eros, gravida sit amet eros id, mattis tempus lacus.
    </p>
    <hr class="my-5" style="width: 100%;" />
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>