Таблетки Bootstrap в таблетках в таблетках
Вот ссылка на JSFiddle, над которым я сейчас работаю. http://jsfiddle.net/PhoenixOfBlades/3bry9Lo8/6/
Я чувствую, что я искал в Интернете ответы. Я нашел много вопросов от людей, которые были озадачены вложением Таблеток / Вкладок, но никогда с таким количеством. Я близок к решению моей проблемы, но этот последний момент меня полностью озадачил.
Я пытаюсь создать Pills внутри Pills внутри Pills внутри Pills для большей организации данных в интерфейсе. В настоящее время мои таблетки возраста находятся внутри моих таблеток Canon, ведя себя так, как я хочу. И теперь я хочу положить свои Таблетки Мира внутрь моих Таблеток возраста, но по какой-то причине они действуют так же, как мои Таблетки возраста и, кажется, находятся внутри моих Таблеток Canon. Я попытался узнать больше о 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
1 ответ
Я не уверен, что это полностью отвечает на ваши вопросы. Дайте мне знать, и я могу пересмотреть это...
Но я предполагаю, что вы хотите вложить объекты. Таблетки не могут быть вложены в бутстрап. Однако вы можете вкладывать таблетки внутрь выпадающего списка.
Пожалуйста, смотрите прикрепленный 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>