Html 如何在水平方向上显示引导卡数据，当我们在水平方向上单击引导卡时，引导卡必须显示数据

在我的angular应用程序中，我创建了引导卡，从而创建了网页

现在我必须显示水平卡片上的数据，当我们点击那个特定的标签时

component.html

<div class="container">
    <ul id="tabs" class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">heading 1</a>
        </li>
        <li class="nav-item">
            <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">heading 2</a>
        </li>
        <li class="nav-item">
            <a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">heading 3</a>
        </li>
    </ul>


    <div id="content" class="tab-content" role="tablist">
        <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
            <div class="card-header" role="tab" id="heading-A">
                <h5 class="mb-0">
                    <!-- Note: `data-parent` removed from here -->
                    <a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
                        Collapsible Group Item A
                    </a>
                </h5>
            </div>

            <!-- Note: New place of `data-parent` -->
            <div id="collapse-A" class="collapse show" data-parent="#content" role="tabpanel" aria-labelledby="heading-A">
                <div class="card-body">
                    <p>info 1.1</p>                         
                    <p>info 1.2</p>
                </div>
            </div>
        </div>

        <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
            <div class="card-header" role="tab" id="heading-B">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">
                        Collapsible Group Item B
                    </a>
                </h5>
            </div>
            <div id="collapse-B" class="collapse" data-parent="#content" role="tabpanel" aria-labelledby="heading-B">
                <div class="card-body">
                    <p>info 2.1</p>
                    <p>info 2.2</p>
                </div>
            </div>
        </div>

        <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
            <div class="card-header" role="tab" id="heading-C">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">
                        Collapsible Group Item C
                    </a>
                </h5>
            </div>
            <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
                <div class="card-body">
                    <p>info 3.1</p>
                    <p>info 2.2</p>
                </div>
            </div>
        </div>
    </div>
</div>

信息1.1

信息1.2

信息2.1

信息2.2

信息3.1

信息2.2

现在，当我们点击特定标题时，我必须显示数据（标题1，标题2，…） 如果特定标题有两个信息（即信息1.11、信息1.21），则数据（信息1.1、信息1.2..）应显示在水平卡片中，而不是一个接一个地显示在另一个哈里森卡片中。

我是新手，有人能帮我吗