Bootstrap5 Tabs转折叠卡片：卡片内部折叠功能桌面端失效

问题出在HTML结构不规范：<ul>的直接子元素只能是<li>，但你在<li>后直接嵌套了<div>，这种无效结构会导致桌面端浏览器渲染异常，进而让Bootstrap的折叠功能失效（移动端浏览器对不规范结构的容错性更强）。

修复后的代码 #

方案一：用<li>包裹折叠内容容器 #

保证<ul>的子元素全为<li>，同时避免<li>直接嵌套<li>：

<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>
    <li class="list-group-item p-0">
      <div id="dog1" class="collapse">
        <ul class="list-group m-0">
          <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>
        </ul>
      </div>
    </li>
  </ul>
  <br>
</div>

方案二：将触发按钮与折叠内容放在同一<li>内 #

如果不需要单独的列表项承载折叠内容，也可以把折叠区域和触发按钮放在同一个<li>中：

<div class="card-body">
  <ul class="list-group">
    <li class="list-group-item p-0">
      <div class="list-group-item text-bg-danger mb-0" aria-current="true" data-bs-toggle="collapse" role="button" data-bs-target="#dog1">Dog 1</div>
      <div id="dog1" class="collapse">
        <ul class="list-group m-0">
          <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>
        </ul>
      </div>
    </li>
  </ul>
  <br>
</div>

修复后，桌面端的折叠功能即可正常触发，同时代码也符合HTML规范要求。

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