Bootstrap 5.1中如何正确嵌套list-group列表组组件

原生Bootstrap的list-group组件没有做嵌套场景的适配，直接嵌套会出现边距错乱、边框分割线异常、层级无缩进的问题，加一段自定义CSS就能完美解决，不需要修改原有DOM结构。

修复用CSS #

把这段代码放在Bootstrap样式文件引入的位置之后：

/* 嵌套列表基础边距、圆角重置 */
.list-group .list-group {
  margin: 0 -1rem;
  border-radius: 0;
}

/* 标准模式边框适配 */
.list-group:not(.list-group-flush) .list-group {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group:not(.list-group-flush) .list-group .list-group-item:last-child {
  border-bottom: none;
  border-radius: 0;
}

/* Flush模式分割线统一 */
.list-group-flush .list-group {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-flush .list-group .list-group-item {
  border-width: 1px 0 0 0;
}

/* 层级缩进配置：每深一级多1.5rem缩进 */
.list-group .list-group .list-group-item {
  padding-left: 2.5rem;
}
.list-group .list-group .list-group .list-group-item {
  padding-left: 4rem;
}

完整示例代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<style>
/* 上述修复CSS */
.list-group .list-group {
  margin: 0 -1rem;
  border-radius: 0;
}
.list-group:not(.list-group-flush) .list-group {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group:not(.list-group-flush) .list-group .list-group-item:last-child {
  border-bottom: none;
  border-radius: 0;
}
.list-group-flush .list-group {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-flush .list-group .list-group-item {
  border-width: 1px 0 0 0;
}
.list-group .list-group .list-group-item {
  padding-left: 2.5rem;
}
.list-group .list-group .list-group .list-group-item {
  padding-left: 4rem;
}
</style>

<h2>Standard</h2>
<ul class="list-group">
  <li class="list-group-item"><a href="/">First</a></li>
  <li class="list-group-item">
    <a href="/">Second</a>
    <ul class="list-group">
      <li class="list-group-item"><a href="/">Level 2 - First</a></li>
      <li class="list-group-item">
        <a href="/">Level 2 - Second</a>
        <ul class="list-group">
          <li class="list-group-item"><a href="/">Level 3 - First</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="list-group-item"><a href="/">Third</a></li>
</ul>

<h2 class="mt-5">With Flush</h2>
<ul class="list-group list-group-flush">
  <li class="list-group-item"><a href="/">First</a></li>
  <li class="list-group-item">
    <a href="/">Second</a>
    <ul class="list-group list-group-flush">
      <li class="list-group-item"><a href="/">Level 2 - First</a></li>
      <li class="list-group-item"><a href="/">Level 2 - Second</a></li>
    </ul>
  </li>
  <li class="list-group-item"><a href="/">Third</a></li>
</ul>

自定义调整 #

• 要修改缩进距离，直接调整对应层级选择器的padding-left数值即可，需要支持更多层级的话按相同规律追加CSS规则就行
• 要修改分割线颜色，替换边框属性里的rgba色值即可
• 修复后标准模式下嵌套列表和父级宽度完全对齐，边框衔接自然无错位；Flush模式下所有分割线样式完全统一，没有多余边框。

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