css - 堆叠 Bootstrap 3 选项卡上的子导航

Question

我在 bootstrap 3 选项卡中创建了一个子导航，自定义样式来自 here现在我想在其中添加一个折叠子导航，这样当子导航打开时，它就在选项卡的边框内，我该如何设计它？ HERE IS MY WORKING SAMPLE AT BOOTPLY ...只需单击第一个导航并查看它的 react

<div style="margin-top:10px;" class="container">
<div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" role="navigation">
                        <div class="tabbable tabs-left">
                             <ul id="myTabSide" class="nav nav-tabs" data-tabs="tabs" style="width:100%;">
                                 <li class="active" data-toggle="tab"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseSideSubNav">Nav item</a>


                                        <ul id="collapseSideSubNav" class="panel-collapse collapse">
                                            <li><a href="#0">Nav item again</a></li>
                                            <li><a href="#1">One more nav</a></li>
                                            <li><a href="#2">Nav item again</a></li>
                                            <li><a href="#3">One more nav</a></li>
                                         </ul>

                                 </li>
                                 <li><a href="#2" data-toggle="tab">Nav item again</a></li>
                                 <li><a href="#3" data-toggle="tab">One more nav</a></li>
                             </ul>
                        </div>
                    </div>
  </div>

Answer 1

如果您希望子导航呈现在选项卡主体内，请将其放在选项卡主体中而不是您拥有它的位置。参见 this bootply .

我搬家了

<ul id="collapseSideSubNav" class="panel-collapse collapse">
    <li><a href="#0">Nav item again</a></li>
    <li><a href="#1">One more nav</a></li>
    <li><a href="#2">Nav item again</a></li>
    <li><a href="#3">One more nav</a></li>
</ul>

在选项卡 Pane 内。我使用了来自 bootstraps 网站的标签的新片段。