Question

我使用了来自this SO question的Bootstrap 2.3.2的嵌套选项卡。

但我想使用最新的Bootstrap Framework 3.3.6甚至4.x Alpha，但我没有更改任何类名，只是CSS，JS和更新的JQuery文件的来源。

我的嵌套标签应该没有两个标签顺序，而是四个。您可以在https://jsfiddle.net/ks93zdxk/3/

查看我当前的状态

问题：

我不知道，如果我能/应该在此代码中将Bootstrap 2.3.2改为Bootstrap 3.3.6。
如果在所有组合中单击“Passiv”，则第三个订单选项卡应与“Aktiv”中的选项卡具有相同的位置，这些选项卡具有相同的名称，但ID不同。单击“transitiv（Hilfsverb avoir）”时遇到同样的问题。这里的第二个顺序选项卡也应该具有相同的位置，如“intransitiv（Hilfsverbêtre）”，它们也具有相同的名称，但ID不同。我认为有些</div> - 标签必须在其他行中，但我不知道它们到底应该在哪里。

Answer 1

主要是，你做得对，但你在HTML标记的嵌套方面犯了一些错误：<div class="tab-content">需要包围<div class="tab-pane">的任何一组。

<div class="tab-content">
  <div class="tab-pane fade active in" id="etre-voice-gender1111">
    <p>Tab 1.1.1.1 être Aussage aktiv männlich</p>
  </div>
  <div class="tab-pane fade" id="etre-voice-gender1112">
    <p>Tab 1.1.1.2 être Aussage aktiv weiblich</p>
  </div>
</div>

Example corrected

您应该参考official documentation。

Des salutations aus der Schweiz。

Tabs Bootstrap中选项卡中选项卡中的嵌套选项卡

1 个答案: