Bootstrap 丸中丸中丸

Question

这是我目前正在处理的 JSFiddle 的 link。 http://jsfiddle.net/PhoenixOfBlades/3bry9Lo8/6/

我觉得我已经在网上搜索了答案。我发现很多人对嵌套感到困惑 Pills/Tabs 但从来没有这么多问题。我即将解决我的问题，但最后一点让我完全难住了。

我正在尝试创建 Pills inside Pills inside Pills inside of Pills，以便在界面中更好地组织数据。目前，我的 Canon Pills 中有我的 Age Pills，它们的行为完全符合我的要求。现在我想将我的世界药丸放入我的年龄药丸中，但出于某种原因，它们的作用与我的年龄药丸相同，而且似乎在我的佳能药丸中。我已经尝试了解更多关于 Bootstrap 的信息，因为我怀疑这可能是某种语法问题，但除了一些代码片段外，我找不到任何关于 Bootstrap 的药丸的信息。这是我正在使用的 fiddle 中的代码，但我在 fiddle 底部注释掉了一些不相关的代码。里面的注释将您引导至处理世界药丸的代码部分。

如果有人能告诉我如何将 World Pills 放入 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>

...请注意，此 fiddle 当前有效，但如果我打开一个新的 fiddle 并将代码粘贴到其中，则它只会显示为无序列表。这是为什么？是设置的问题吗？

谢谢你回答了额外的问题^_^ 我不再不知道我有 bootstrap.min.css 和 bootstrap.min.js

的外部资源选项卡

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

Bootstrap 丸中丸中丸

Bootstrap Pills in Pills in Pills

html

css

twitter-bootstrap

nested

nav-pills