如何消除Bootstrap折叠列表组项的上下双重边框

你遇到的问题核心是Bootstrap的collapse组件在动画过程中会切换.collapsing和.collapse类，之前的CSS只覆盖了静态的.collapse状态，没处理动画中的过渡阶段，导致边框在动画时仍会重复出现。

可以用以下CSS彻底解决：

/* 移除折叠容器内列表项的顶部边框 */
.list-group .collapse > .list-group-item,
.list-group .collapsing > .list-group-item {
  border-top-width: 0;
}

/* 移除折叠容器下方列表项的顶部边框（覆盖展开和动画状态） */
.list-group .collapse.show + .list-group-item,
.list-group .collapsing + .list-group-item {
  border-top-width: 0;
}

代码说明： #

• .collapsing是Bootstrap在collapse动画过程中给容器添加的临时类，必须加入选择器才能覆盖动画阶段的边框样式；
• .collapse.show对应折叠内容完全展开后的状态，确保展开后下方列表项的边框依然正确；
• 同时针对折叠容器内部和外部的列表项分别处理，覆盖所有可能出现双重边框的场景。

修改后的完整示例代码： #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<style>
/* 移除折叠容器内列表项的顶部边框 */
.list-group .collapse > .list-group-item,
.list-group .collapsing > .list-group-item {
  border-top-width: 0;
}

/* 移除折叠容器下方列表项的顶部边框（覆盖展开和动画状态） */
.list-group .collapse.show + .list-group-item,
.list-group .collapsing + .list-group-item {
  border-top-width: 0;
}
</style>

<div class="list-group">
  <a class="list-group-item list-group-item-action" href="#collapser" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapser">Here's the trigger</a>
  <div class="collapse" id="collapser">
    <div class="list-group-item">Here's the collapsing content</div>
  </div>
  <span class="list-group-item list-group-item-action">Here's another item</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

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