Bootstrapのタブパネルの入れ子

落ちてるやつを見つけたけど、間違ってたのとみにくいから少し修正してみた。↓こんな感じ。

        <div class="card">

            <div class="card-header">

                <ul class="nav nav-tabs card-header-tabs" id="outerTab" role="tablist">

                <li class="nav-item">

                    <a class="nav-link active" data-toggle="tab" href="#tabc" aria-controls="tabc" role="tab" aria-expanded="true">Tab-1</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" data-toggle="tab" href="#tabb" aria-controls="tabb" role="tab">Tab-2</a>

                </li>

                </ul>

            </div>

            <div class="card-body tab-content">

                <div class="tab-pane active" id="tabc" role="tabpanel">

                Content for Tab-1 and:

                    <div class="card">

                        <div class="card-header">

                        <ul class="nav nav-tabs card-header-tabs" id="innerTab" role="tablist">

                            <li class="nav-item">

                            <a class="nav-link active" data-toggle="tab" href="#tab1" aria-controls="tab1" role="tab" aria-expanded="true">Nested Tab-1</a>

                            </li>

                            <li class="nav-item">

                            <a class="nav-link" data-toggle="tab" href="#tab2" aria-controls="tab2" role="tab">Nested Tab-2</a>

                            </li>

                        </ul>

                        </div>

                        <div class="card-body tab-content">

                        <div class="tab-pane active" id="tab1" role="tabpanel">

                            Content for Nested Tab-1

                        </div>

                        <div class="tab-pane" id="tab2" role="tabpanel">

                            Content for Nested Tab-2

                        </div>

                        </div>

                    </div>

                </div>

                <div class="tab-pane" id="tabb" role="tabpanel">

                Content for Tab-2 and:

                <div class="card">

                    <div class="card-header">

                        <ul class="nav nav-tabs card-header-tabs" id="innerTab" role="tablist">

                            <li class="nav-item">

                            <a class="nav-link active" data-toggle="tab" href="#tab21" aria-controls="tab21" role="tab" aria-expanded="true">Nested Tab-1</a>

                            </li>

                            <li class="nav-item">

                            <a class="nav-link" data-toggle="tab" href="#tab22" aria-controls="tab22" role="tab">Nested Tab-2</a>

                            </li>

                        </ul>

                        </div>

                        <div class="card-body tab-content">

                        <div class="tab-pane active" id="tab21" role="tabpanel">

                            Content for Nested Tab-21

                        </div>

                        <div class="tab-pane" id="tab22" role="tabpanel">

                            Content for Nested Tab-22

                        </div>

                        </div>

                    </div>

                </div>

            </div>

            </div>