2

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

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

我正在尝试在 Pills inside Pills inside Pills inside 创建 Pills，以便在界面中更好地组织数据。目前，我的 Canon Pills 中的 Age Pills 完全符合我的要求。现在我想把我的世界药丸放在我的年龄药丸中，但由于某种原因，它们的作用与我的年龄药丸相同，并且似乎在我的佳能药丸中。我已经尝试了解更多有关 Bootstrap 的信息，因为我怀疑这可能是某种语法问题，但除了一些代码片段之外，我无法找到有关 Bootstrap 药丸的任何信息。这是我正在使用的小提琴中的代码，除了我在小提琴底部注释掉的一些不相关的代码。里面的注释将您引导到处理 World 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 的外部资源选项卡

4

1 回答 1

1

我不确定这是否完全回答了您的问题。让我知道，我可以修改它...

但我假设你想嵌套对象。Pills 不能像 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>
于 2015-10-27T21:12:34.323 回答