这是我目前正在处理的JSFiddle的链接。 http://jsfiddle.net/PhoenixOfBlades/3bry9Lo8/6/
我觉得我已经在网上搜索了答案。我发现很多人对于嵌套Pills / Tabs感到困惑，但从来没有这么多。我差不多要解决我的问题，但这最后一点让我完全难过。
我正在尝试在Pills内部的Pills内部创建Pills，以便在界面中实现更好的数据组织。目前，我的佳能丸中的Age Pills表现完全符合我的要求。现在我想把我的世界药丸放在我的Age Pills中，但由于某些原因它们的作用与我的Age Pills一样，似乎在我的佳能丸中。我已经尝试了解有关Bootstrap的更多信息，因为我怀疑它可能是某种类型的语法问题，但除了一些代码片段之外，我还没有找到任何有关Bootstrap药丸的信息。以下是我正在使用的小提琴的代码，除了我在小提琴底部注释掉的一些不相关的代码。内部的评论说明指导您处理世界药丸的代码部分。
如果有人能告诉我如何将世界药丸放入Age Pills而不是Canon Pills，或者向我解释为什么他们这样做，我会非常感激。
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon0" data-toggle="pill">Canon 0</a></li>
<li class=""><a href="#Canon1" data-toggle="pill">Canon 1</a></li>
<li class=""><a href="#Canon2" data-toggle="pill">Canon 2</a></li>
<li class=""><a href="#Canon3" data-toggle="pill">Canon 3</a></li>
<li class=""><a href="#Canon4" data-toggle="pill">Canon 4</a></li>
<li class=""><a href="#Canon5" data-toggle="pill">New Canon</a></li>
</ul>
<div class="tab-content">
<div id="Canon0" class="tab-pane active">
<h3>Section A</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon0Age0" data-toggle="pill">Age 0</a></li>
<li class=""><a href="#Canon0Age1" data-toggle="pill">Age 1</a></li>
<li class=""><a href="#Canon0Age2" data-toggle="pill">Age 2</a></li>
<li class=""><a href="#Canon0Age3" data-toggle="pill">Age 3</a></li>
<li class=""><a href="#Canon0Age4" data-toggle="pill">Age 4</a></li>
<li class=""><a href="#Canon0Age5" data-toggle="pill">Age 5</a></li>
</ul>
<!--down--->
<div class="tab-content">
<div id="#Canon0Age0" class="tab-pane active">
<h3>Section 1</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon0Age0World0" data-toggle="pill">World 0</a></li>
<li class=""><a href="#Canon0Age0World1" data-toggle="pill">World 1</a></li>
<li class=""><a href="#Canon0Age0World2" data-toggle="pill">World 2</a></li>
<li class=""><a href="#Canon0Age0World3" data-toggle="pill">World 3</a></li>
<li class=""><a href="#Canon0Age0World4" data-toggle="pill">World 4</a></li>
<li class=""><a href="#Canon0Age0World5" data-toggle="pill">World 5</a></li>
</ul>
</div>
</div>
<!---up--->
</div>
<div id="Canon1" class="tab-pane">
<h3>Section B</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon1Age0" data-toggle="pill">Age 0</a></li>
<li class=""><a href="#Canon1Age1" data-toggle="pill">Age 1</a></li>
<li class=""><a href="#Canon1Age2" data-toggle="pill">Age 2</a></li>
<li class=""><a href="#Canon1Age3" data-toggle="pill">Age 3</a></li>
<li class=""><a href="#Canon1Age4" data-toggle="pill">Age 4</a></li>
<li class=""><a href="#Canon1Age5" data-toggle="pill">Age 5</a></li>
</ul>
<!----down---->
<div id="#Canon0Age1" class="tab-pane">
<h3>Section 2</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon0Age1World0" data-toggle="pill">World 0</a></li>
<li class=""><a href="#Canon0Age1World1" data-toggle="pill">World 1</a></li>
<li class=""><a href="#Canon0Age1World2" data-toggle="pill">World 2</a></li>
<li class=""><a href="#Canon0Age1World3" data-toggle="pill">World 3</a></li>
<li class=""><a href="#Canon0Age1World4" data-toggle="pill">World 4</a></li>
<li class=""><a href="#Canon0Age1World5" data-toggle="pill">World 5</a></li>
</ul>
</div>
<!-----up----->
</div>
<div id="Canon2" class="tab-pane">
<h3>Section C</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon2Age0" data-toggle="pill">Age 0</a></li>
<li class=""><a href="#Canon2Age1" data-toggle="pill">Age 1</a></li>
<li class=""><a href="#Canon2Age2" data-toggle="pill">Age 2</a></li>
<li class=""><a href="#Canon2Age3" data-toggle="pill">Age 3</a></li>
<li class=""><a href="#Canon2Age4" data-toggle="pill">Age 4</a></li>
<li class=""><a href="#Canon2Age5" data-toggle="pill">Age 5</a></li>
</ul>
</div>
<div id="Canon3" class="tab-pane">
<h3>Section D</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon3Age0" data-toggle="pill">Age 0</a></li>
<li class=""><a href="#Canon3Age1" data-toggle="pill">Age 1</a></li>
<li class=""><a href="#Canon3Age2" data-toggle="pill">Age 2</a></li>
<li class=""><a href="#Canon3Age3" data-toggle="pill">Age 3</a></li>
<li class=""><a href="#Canon3Age4" data-toggle="pill">Age 4</a></li>
<li class=""><a href="#Canon3Age5" data-toggle="pill">Age 5</a></li>
</ul>
</div>
<div id="Canon4" class="tab-pane">
<h3>Section E</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon4Age0" data-toggle="pill">Age 0</a></li>
<li class=""><a href="#Canon4Age1" data-toggle="pill">Age 1</a></li>
<li class=""><a href="#Canon4Age2" data-toggle="pill">Age 2</a></li>
<li class=""><a href="#Canon4Age3" data-toggle="pill">Age 3</a></li>
<li class=""><a href="#Canon4Age4" data-toggle="pill">Age 4</a></li>
<li class=""><a href="#Canon4Age5" data-toggle="pill">Age 5</a></li>
</ul>
</div>
<div id="Canon5" class="tab-pane">
<h3>Section F</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon5Age0" data-toggle="pill">Age 0</a></li>
<li class=""><a href="#Canon5Age1" data-toggle="pill">Age 1</a></li>
<li class=""><a href="#Canon5Age2" data-toggle="pill">Age 2</a></li>
<li class=""><a href="#Canon5Age3" data-toggle="pill">Age 3</a></li>
<li class=""><a href="#Canon5Age4" data-toggle="pill">Age 4</a></li>
<li class=""><a href="#Canon5Age5" data-toggle="pill">Age 5</a></li>
</ul>
</div>
...从侧面说明这个小提琴当前有效，但如果我打开一个新的小提琴并将代码粘贴到其中，那么它只会显示为无序列表。这是为什么？这是设置问题吗？
谢谢你回答了红利问题^ _ ^我不再不知道我有bootstrap.min.css和bootstrap.min.js的外部资源标签
答案 0 :(得分：1)
我不确定这是否完全回答了你的问题。让我知道，我可以修改它......
但我假设您想要嵌套对象。药丸不能像bootstrap中那样嵌套。但是你可以将药片放在下拉中。
请参阅随附的jsfiddle：http://jsfiddle.net/u6Lczfz6/
代码：
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Age 0
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">World 0</a></li>
<li><a href="#">World 1</a></li>
<li><a href="#">World 2</a></li>
<li><a href="#">etc...</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Age 1
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">World 0</a></li>
<li><a href="#">World 1</a></li>
<li><a href="#">World 2</a></li>
<li><a href="#">etc...</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
etc..
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">World 0</a></li>
<li><a href="#">World 1</a></li>
<li><a href="#">World 2</a></li>
<li><a href="#">etc...</a></li>
</ul>
</div>
</div>
</div>
</div>