Bootstrap 4：如何利用无序列表实现图片重叠效果？

问题说明 #

需要复刻的设计中，用户头像列表呈现互相重叠的效果，但当前使用Bootstrap的list-group-horizontal类只能让头像分散排列，无法实现类似反向gap的重叠效果。

解决方案 #

通过自定义CSS负外边距实现图片重叠，具体步骤如下：

1. 修改列表HTML结构
   移除Bootstrap自带的list-group-horizontal类（该类会添加默认间距），添加自定义类名用于样式控制：

<!-- 替换原用户列表的ul标签 -->
<ul class="list-unstyled d-flex align-items-center user-avatar-list">
    <li><img class="rounded-circle" src="./images/user1.png" width="75px"></li>
    <li><img class="rounded-circle" src="./images/user2.png" width="75px"></li>
    <li><img class="rounded-circle" src="./images/user3.png" width="75px"></li>
    <li><img class="rounded-circle" src="./images/user4.png" width="75px"></li>
    <li><img class="rounded-circle" src="./images/user5.png" width="75px"></li>
</ul>

2. 添加自定义CSS样式
   在<head>标签内插入<style>标签，设置负外边距实现重叠，并优化视觉效果：

<style>
    .user-avatar-list {
        padding-left: 0; /* 移除列表默认内边距 */
    }
    .user-avatar-list li:not(:first-child) {
        margin-left: -25px; /* 控制重叠程度，数值越大重叠范围越广 */
    }
    .user-avatar-list img {
        border: 3px solid #22264b; /* 添加与背景同色边框，避免重叠后头像边缘生硬 */
        z-index: 1; /* 确保后续头像层级更高，显示在上方 */
    }
</style>

原理说明 #

• 负外边距margin-left: -25px让后续头像向左偏移，覆盖前一个头像的部分区域，实现重叠；
• 同背景色边框避免头像重叠后边缘被完全覆盖，保持视觉完整性；
• z-index控制头像层级，确保后添加的头像显示在上方，符合设计预期。

修改后的关键代码片段 #

<head>
    <!-- 原有head内容保留，添加以下样式 -->
    <style>
        .user-avatar-list {
            padding-left: 0;
        }
        .user-avatar-list li:not(:first-child) {
            margin-left: -25px;
        }
        .user-avatar-list img {
            border: 3px solid #22264b;
            z-index: 1;
        }
    </style>
</head>

<!-- Banner区域的用户列表修改后 -->
<div class="col-xl-5">
    <ul class="list-unstyled d-flex align-items-center user-avatar-list">
            <li><img class="rounded-circle" src="./images/user1.png" width="75px"></li>
            <li><img class="rounded-circle" src="./images/user2.png" width="75px"></li>
            <li><img class="rounded-circle" src="./images/user3.png" width="75px"></li>
            <li><img class="rounded-circle" src="./images/user4.png" width="75px"></li>
            <li><img class="rounded-circle" src="./images/user5.png" width="75px"></li>
    </ul>
</div>

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