Bootstrap 5 Tabs to Collapse cards，里面的卡片无法折叠

Question

此代码在移动视图上工作正常但在桌面视图上 see the snippet heredogs标签页内容（另一个可折叠卡片，点击Dog 1红色标题）怎么收不起来

      <div class="card-body">
        <ul class="list-group">
          <li class="list-group-item text-bg-danger" aria-current="true" data-bs-toggle="collapse" role="button" data-bs-target="#dog1">Dog 1</li>
          <div id="dog1" class="collapse">
            <li class="list-group-item d-flex justify-content-between align-items-center">Eyes <span>2</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Tail<span>short</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Color <span>black</span>
            </li>
          </div>
        </ul>
        <br>
      </div>
 

Answer 1

.responsive 中的所有折叠都设置了显示块

.responsive-tabs .card  .collapse {
    display: block;/*OK*/         
 }

解决方案: 仅使用>设置第一个孩子

.responsive-tabs .card > .collapse {
       display: block;         
}