Bootstrap双列布局：固定col-4列表组及响应式替代方案

一、固定col-4列list-group的实现方法 #

要让左侧col-4内的list-group在页面滚动时保持固定位置，同时保证垂直对齐，可通过以下两种方式实现：

方式1：使用Bootstrap内置粘性定位类 #

直接给包含list-group的#scrollSpyList卡片添加sticky-top类，滚动时它会固定在视口顶部，自动和内容区域保持垂直对齐：

<div class="card sticky-top" id="scrollSpyList">
  <!-- 原有卡片内容保持不变 -->
</div>

注意：父容器col-4不能设置overflow:hidden，否则粘性定位会失效；若要调整固定的顶部间距，可自定义CSS，比如.sticky-top { top: 2rem; }。

方式2：自定义固定定位（垂直居中） #

如果需要让导航垂直居中固定在左侧，可添加自定义CSS（仅在大屏生效，避免小屏幕布局冲突）：

@media (min-width: 992px) {
  #scrollSpyList {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    max-height: 90vh; /* 防止导航内容超出视口 */
    overflow-y: auto; /* 导航过长时允许内部滚动 */
  }
}

同时给col-4设置min-height: 100vh，确保容器高度足够，避免布局错乱。

二、响应式替代解决方案 #

固定定位在小屏幕（平板、手机）会导致导航覆盖内容区域，推荐以下两种实用替代方案：

方案1：小屏幕转为单列布局 #

利用Bootstrap响应式栅格类，将大屏的col-4/col-8改为小屏幕的col-12，让导航自动移到内容上方：

<div class="row mb-5 p-4 pb-0 pe-lg-0 pt-lg-5r">
  <!-- 小屏幕占满整行，大屏占4列 -->
  <div class="col-12 col-lg-4 py-5 px-5">
    <div class="card sticky-top" id="scrollSpyList">
      <!-- 导航内容 -->
    </div>
  </div>
  <!-- 小屏幕占满整行，大屏占8列 -->
  <div class="col-12 col-lg-8 py-5 px-5" data-bs-spy="scroll" data-bs-target="#scrollSpyList" data-bs-smooth-scroll="true" tabindex="0">
    <!-- 内容区域 -->
  </div>
</div>

这种方案简单直接，小屏幕下导航变为顶部粘性导航，不影响内容浏览。

方案2：使用Offcanvas折叠组件 #

小屏幕时将导航隐藏为侧边栏，通过按钮触发展开，避免占用内容空间：

1. 添加仅小屏幕显示的触发按钮：

<button class="d-lg-none btn btn-primary mb-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
  打开导航
</button>

2. 将原导航内容放入Offcanvas容器：

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasNavLabel">导航</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- 原card内的所有导航内容（header、分类、list-group） -->
  </div>
</div>

3. 大屏时保留原固定导航，通过显示隐藏类控制：

<!-- 大屏显示的固定导航 -->
<div class="d-none d-lg-block col-lg-4 py-5 px-5">
  <div class="card sticky-top" id="scrollSpyList">
    <!-- 导航内容 -->
  </div>
</div>

这种方案兼顾大屏的固定导航体验，小屏幕又能通过折叠组件节省空间，避免布局冲突。

内容的提问来源于stack exchange，提问作者rshah