twitter-bootstrap Bootstrap 3：嵌套选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19531624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Nested tab
提问by user2158382
I am trying to put a tab inside of a tab, but whenever I click a inner nested tab, the entire inner nested tab row goes away. Here is an example in a jsfiddle
我试图在选项卡内放置一个选项卡，但是每当我单击内部嵌套选项卡时，整个内部嵌套选项卡行都会消失。这是jsfiddle中的一个例子
Try clicking "Acquisitions/Facebook" tab. You will notice the second row of tabs just disappear.
尝试点击“收购/Facebook”标签。您会注意到第二行选项卡消失了。
Here is my code
这是我的代码
<h1> Dashboard </h1>
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#acquisition_tab" data-toggle="tab"><b>Acquisition</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#engagement_tab" data-toggle="tab">Engagement</a></li>
<li><a href="#retention_tab" data-toggle="tab">Retention</a></li>
<li><a href="#revenue_tab" data-toggle="tab">Revenue</a></li>
</ul>
<div class="tab-content">
<div id="acquisition_tab" class="tab-pane">
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#all_acquisition_tab" data-toggle="tab"><b>All</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
<li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>Yahoo</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
</ul>
</div>
<div id="engagement_tab" class="tab-pane">
<p> Engagement tab </p>
</div>
<div id="retention_tab" class="tab-pane">
<p> Retention tab </p>
</div>
<div id="revenue_tab" class="tab-pane">
<p> Revenue tab </p>
</div>
<div id="all_acquisition_tab" class="tab-pane">
<p> All acquisition </p>
</div>
<div id="facebook_acquisition_tab" class="tab-pane">
<p> All acquisition </p>
</div>
<div id="yahoo_acquisition_tab" class="tab-pane">
<p> All acquisition </p>
</div>
</div>
回答by Rich
Your inner tabs should be wrapped in a div with the tab-contentclass.
您的内部选项卡应该与tab-content类一起包含在一个 div 中。
Try this...
试试这个...
<h1> Dashboard </h1>
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#acquisition_tab" data-toggle="tab"><b>Acquisition</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#engagement_tab" data-toggle="tab">Engagement</a></li>
<li><a href="#retention_tab" data-toggle="tab">Retention</a></li>
<li><a href="#revenue_tab" data-toggle="tab">Revenue</a></li>
</ul>
<div class="tab-content">
<div id="acquisition_tab" class="tab-pane">
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#all_acquisition_tab" data-toggle="tab"><b>All</b><span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b><span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
<li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>Yahoo</b><span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
</ul>
</div>
<div id="engagement_tab" class="tab-pane">
<p>Engagement tab</p>
</div>
<div id="retention_tab" class="tab-pane">
<p>Retention tab</p>
</div>
<div id="revenue_tab" class="tab-pane">
<p>Revenue tab</p>
</div>
<div class="tab-content">
<div id="all_acquisition_tab" class="tab-pane">
<p>All acquisition</p>
</div>
<div id="facebook_acquisition_tab" class="tab-pane">
<p>All acquisition</p>
</div>
<div id="yahoo_acquisition_tab" class="tab-pane">
<p>All acquisition</p>
</div>
</div>
</div>
