Bootstrap 4单列滚动实现：仅列表所在列显示滚动条

嘿，这个需求其实很好实现，核心就是给那个包含列表的列里的内容容器设置高度限制，同时开启垂直滚动就行，这样滚动条只会出现在目标列内部，不会影响其他区域。

具体做法是这样的：

• 给目标列里的内容容器（比如card-body）设置固定高度或者最大高度
• 加上overflow-y: auto属性，让内容超出时自动显示垂直滚动条

给你一个完整的代码示例，直接套用就行：

<div class="row">
  <!-- 第一列：普通内容 -->
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">普通列1</h5>
        <p class="card-text">这里是普通内容，不需要滚动...</p>
      </div>
    </div>
  </div>
  <!-- 第二列：普通内容 -->
  <div class="col-sm-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">普通列2</h5>
        <p class="card-text">这里也是普通内容，不需要滚动...</p>
      </div>
    </div>
  </div>
  <!-- 第三列：带列表的可滚动列 -->
  <div class="col-sm-4">
    <div class="card">
      <!-- 关键就是给这个card-body加样式 -->
      <div class="card-body" style="max-height: 300px; overflow-y: auto;">
        <h5 class="card-title">可滚动列表列</h5>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">列表项1</li>
          <li class="list-group-item">列表项2</li>
          <li class="list-group-item">列表项3</li>
          <li class="list-group-item">列表项4</li>
          <li class="list-group-item">列表项5</li>
          <li class="list-group-item">列表项6</li>
          <li class="list-group-item">列表项7</li>
          <li class="list-group-item">列表项8</li>
          <li class="list-group-item">列表项9</li>
          <li class="list-group-item">列表项10</li>
          <li class="list-group-item">列表项11</li>
          <li class="list-group-item">列表项12</li>
        </ul>
      </div>
    </div>
  </div>
</div>

另外给你两个小提示：

1. 高度值可以根据你的布局需求调整，max-height是内容不够时不会强行占满高度，height是固定高度，按需选择就行。
2. 如果你不想用内联样式，建议定义一个自定义CSS类，比如：

.scrollable-content {
  max-height: 300px;
  overflow-y: auto;
}

然后给对应的card-body加上class="card-body scrollable-content"，这样代码更整洁，也方便复用。

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