如何使用CSS修改Bootstrap列表列数，实现每行显示5个列表项

问题原因 #

你当前每行默认显示3个元素，是因为<li>标签使用了col-lg-4类，Bootstrap默认采用12列栅格系统，12/4=3，所以每行刚好容纳3个元素。你之前用column-count不生效，是因为当前布局用的是Bootstrap的flex栅格规则，和column多列布局规则冲突。

实现方法（2种可选） #

方法一：使用Bootstrap内置row-cols类（推荐，适配响应式）

Bootstrap 4.1及以上版本支持row-cols-*系列类，可直接指定每行显示的元素数量，修改步骤如下：

1. 给<ul class="new_friend_list list-unstyled row">添加row-cols-lg-5类，指定大屏幕下每行显示5个元素，你也可以根据需求补充其他断点的规则，比如小屏每行2个就加row-cols-sm-2
2. 删掉所有<li>标签上原有的col-lg-4 col-md-2 col-sm-6 col-4类，避免原有栅格类优先级更高覆盖配置

修改后的代码示例：

<!-- ul标签修改后 -->
<ul class="new_friend_list list-unstyled row row-cols-lg-5 row-cols-md-3 row-cols-sm-2 row-cols-2">
<!-- 所有li标签修改后 -->
<li class="col">

方法二：自定义CSS实现（兼容旧版Bootstrap）

如果你的Bootstrap版本低于4.1不支持row-cols，可以直接添加自定义CSS规则，手动指定每个li的宽度，不需要修改原有HTML结构：

/* 大屏幕下每行5个，每个宽度20% */
@media (min-width: 992px) {
  .new_friend_list li {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
/* 中等屏幕每行3个，可根据需求自行调整断点和数量 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .new_friend_list li {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

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