我的 Bootstrap Tabs to Accordions（用于小屏幕）部分不再折叠 Bootstrap 5.3.2 中的手风琴了吗？

问：

我构建了一个 Bootstrap 部分，在大屏幕上使用 Tabs 转换为小屏幕 （Phone） 上的 Bootstrap 手风琴。在我更新到 Bootstrap 5.3.2（其他功能需要）之前，它运行良好。 这些选项卡在大屏幕上工作正常。 在手机上，手风琴项目正常打开但不折叠？

这是我的代码：

<div id="tabs-accordions-container" class="tabs-accordions-container">
<div class="bootstrap-tab-accordion container-tab responsive-tabs">
    <div class="container-nav role=">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item big-screen-tab-title"><a href="#tab-a" class="nav-link stretched-link active" role="tab" data-bs-toggle="tab">TAB A LINK</a></li>
            <li class="nav-item big-screen-tab-title"><a href="#tab-b" class="nav-link stretched-link" role="tab" data-bs-toggle="tab">TAB B LINK</a></li>
            <li class="nav-item big-screen-tab-title"><a href="#tab-c" class="nav-link stretched-link" role="tab" data-bs-toggle="tab">TAB C LINK</a></li>
        </ul>
    </div>
    <div class="tab-content" role="tablist">
        <div id="tab-a" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-a">
            <div class="card-header small-screen-tab-title" role="tab"><a href="#collapse-tab-a" class="stretched-link" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapse-tab-a"> SEO vérification technique </a></div>
            <div id="collapse-tab-a" class="collapse show" role="tabpanel" data-bs-parent="#content" aria-labelledby="heading-tab-a">
                <div class="card-body">TAB A CONTENT</div>
            </div>
        </div>
        <div id="tab-b" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-b">
            <div class="card-header small-screen-tab-title" role="tab"><a href="#collapse-tab-b" class="collapsed stretched-link" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapse-tab-b"> Vidéos corporatifs </a></div>
            <div id="collapse-tab-b" class="collapse" role="tabpanel" data-bs-parent="#content" aria-labelledby="heading-tab-b">
                <div class="card-body">TAB B CONTENT</div>
            </div>
        </div>
        <div id="tab-c" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-c">
            <div class="card-header small-screen-tab-title" role="tab"><a href="#collapse-tab-c" class="collapsed stretched-link" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapse-tab-c"> Marketing Web et Traditionnel </a></div>
            <div id="collapse-tab-c" class="collapse" role="tabpanel" data-bs-parent="#content" aria-labelledby="heading-tab-c">
                <div class="card-body">TAB C CONTENT</div>
            </div>
        </div>
    </div>
</div>