如何用Bootstrap 4实现左侧列固定、右侧列可滚动的布局？

针对你的Bootstrap+Angular布局需求，下面提供两种常用的实现方式，可根据实际场景选择：

方式一：左侧列滚动到顶部后固定（Sticky定位） #

这种方式下，左侧列会跟随页面滚动，当到达视口顶部时固定住，右侧列正常滚动，适配大多数常规场景。

修改后的代码 #

<div class="container-fluid">
  <div class="row">
    <!-- 左侧固定列 -->
    <div class="col-md-3 sticky-sidebar">
      <app-articles></app-articles>
      <app-navigation></app-navigation>
    </div>

    <!-- 右侧滚动列 -->
    <div class="col-md-9">
      <div class="card" *ngFor="let post of posts; let i = index">
        <!-- 卡片内容 -->
      </div>
    </div>
  </div>
</div>

添加CSS样式 #

.sticky-sidebar {
  position: sticky;
  top: 0; /* 可根据页面顶部导航栏高度调整，比如导航栏高60px就设为top: 60px */
  align-self: flex-start; /* 解决flex布局下sticky定位失效问题 */
  min-height: 100vh; /* 可选：确保侧边栏至少占满视口高度，避免内容过短时不固定 */
}

方式二：左侧列始终固定在视口，右侧列单独滚动 #

这种方式下，左侧列一直固定在视口左侧，右侧列的内容区域独立滚动，页面整体无滚动条，适合特殊场景需求。

修改后的代码 #

<div class="container-fluid h-100">
  <div class="row h-100">
    <!-- 左侧固定列 -->
    <div class="col-md-3 fixed-sidebar">
      <app-articles></app-articles>
      <app-navigation></app-navigation>
    </div>

    <!-- 右侧滚动列 -->
    <div class="col-md-9 overflow-auto">
      <div class="card" *ngFor="let post of posts; let i = index">
        <!-- 卡片内容 -->
      </div>
    </div>
  </div>
</div>

添加CSS样式 #

/* 确保根容器占满视口高度 */
html, body {
  height: 100%;
  overflow: hidden;
}

.fixed-sidebar {
  position: fixed;
  height: 100vh;
  overflow-y: auto; /* 侧边栏内容过多时，自身可滚动 */
}

.overflow-auto {
  height: 100vh;
  padding-left: 15px; /* 抵消Bootstrap列的默认padding，避免内容被侧边栏遮挡 */
}

额外适配提示 #

如果需要在移动端取消固定效果，可借助Bootstrap的媒体查询：

@media (max-width: 767px) {
  .sticky-sidebar, .fixed-sidebar {
    position: static;
    height: auto;
  }
  .overflow-auto {
    height: auto;
    padding-left: 0;
  }
}

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