Question

我已经使用here中的自定义样式在bootstrap 3选项卡中创建了一个子导航，现在我想在其中添加一个折叠子导航，这样当子导航打开时，它就在边界内标签，我该怎么样？ HERE IS MY WORKING SAMPLE AT BOOTPLY ...只需点击第一个导航，看看它是如何反应的

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

选项卡窗格中的

。我在bootstraps网站上使用了一个新的代码片段。

堆叠引导3选项卡上的子导航

1 个答案: