タブ内のタブ内のネストされたタブタブ内のタブ内のブートストラップ

Question

ブートストラップ2.3.2のネストされたタブをthis SO questionから使用しました。

最新のBootstrap Framework 3.3.6または4.x Alphaを使用したいと思いますが、CSS、JS、および新しいJQueryファイルのソースのみのクラス名は変更しませんでした。

入れ子のタブには2つのタブオーダーがあり、4つのタブオーダーはありません。あなたはhttps://jsfiddle.net/ks93zdxk/3/

質問で私の現在の状態を見ることができます ：

1. 私は/このコードでは3.3.6をブートストラップするブートストラップ2.3.2から何かを変える必要があることができれば、私は、知りません。

2. 「Passiv」をすべての組み合わせでクリックすると、3番目のタブは同じ名前でIDが異なる「Aktiv」のタブと同じ位置になります。 私は "transitiv（Hilfsverb avoir）"をクリックして同じ問題を抱えています。ここでは、2番目の順序のタブも同じ名前を持ちますが、異なるIDを持つ "intransitiv（Hilfsverbêtre）"のような同じ位置を持つ必要があります。 私は一部の</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。