如何为Bootstrap媒体列表添加滚动条？附代码及问题说明

看起来你已经尝试了定位类，但没抓住滚动条生效的核心条件：元素需要有明确的高度（或最大高度）限制，再配合overflow-y: auto才能触发滚动。position类只是调整定位方式，并不会自动给元素设置高度，所以之前的尝试没效果。

下面是具体的解决步骤：

1. 分析当前结构问题 #

你页面里的媒体列表是放在.tab-pane#pills-info中的ul.list-unstyled，虽然加了h-100和overflow-auto，但它的父容器.tab-pane没有明确的高度限制，导致h-100无法正确继承高度，自然不会出现滚动条。

2. 添加自定义CSS规则 #

在你的<style>标签里添加针对移动端的样式，给媒体列表设置最大高度并开启垂直滚动：

/* 针对移动端设备（屏幕宽度小于768px） */
@media (max-width: 767px) {
  #pills-info .list-unstyled {
    max-height: 280px; /* 可以根据你的页面布局调整这个值 */
    overflow-y: auto;
    /* 可选：自定义滚动条样式，提升移动端体验 */
    scrollbar-width: thin;
  }
}

3. 验证效果 #

这样设置后，当移动端页面的媒体列表内容高度超过280px时，就会自动显示垂直滚动条，用户可以滚动查看全部内容。

如果你希望在所有设备上都生效，去掉@media媒体查询即可：

#pills-info .list-unstyled {
  max-height: 280px;
  overflow-y: auto;
}

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