单击特定选项卡时如何显示引导卡主体数据

问题描述

在我的有角度的应用程序中，我将引导卡放置了标题和数据，这些引导卡和数据将数据显示为水平（使用的水平卡）。

component.html

<div class="bs-example">
    <div class="card" id="dd" style="max-width: 800px;">
        <div class="row no-gutters">
            <div class="col-sm-3" >
                <h5>heading 1</h5>
                <div class="card-body">
                    <p>info 1.1</p>                         
                    <p>info 1.2</p>                         
                </div>
            </div>
            <div class="col-sm-3" >
                <h5>heading 2</h5>
                <div class="card-body">
                    <p>info 2.1</p>
                    <p>info 2.2</p>

                </div>
            </div>
            <div class="col-sm-3" >
                <h5>heading 3</h5>
                <div class="card-body">
                    <p>info 3.1</p>
                    <p>info 2.2</p>
                </div>
            </div>
            
        </div>
    </div>
</div>

现在，我想将标题设为标题1,2,3 ..作为选项卡。当我们单击该特定选项卡时，数据（即信息）将像信息1.1，信息1.2，信息1.3等（必须如上所述水平移动）如果标题另一个数据信息必须到达另一张卡片（在卡片上方之后）像信息1.11，信息1.12等，并且其他标题也是如此，那么有人可以请帮助我为此，我是这个引导程序的新手。

我想单击每个选项卡在卧式汽车中显示数据。如果标题中有两个信息数据，则显示一个信息。

解决方法

您可以为标签使用引导程序类。

<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>

Example