多個bootstrap選項卡 - 垂直和水平

Question

在AngularJS + Bootstrap項目中，我試圖在左側創建一個垂直導航菜單/選項卡，而其中一個選項卡的內容應該有其自己的選項卡（輔助選項卡） ，水平。

我的問題：
1.次級翼片的內容被顯示在第二小突起部的所需位置
2.導航外不工作。

您可以在這裏看看我的代碼：http://www.bootply.com/vhArvv1N5V

主導航欄（垂直）（以證明在：http://www.bootply.com/74926）工作正常

Answer 1

爲了解決第一個問題，你需要浮動，首先導航左。我通過在導航和標籤內容周圍使用Bootstrap的col-md-2和col-md-10來解決此問題，以及用於佈局的強制性行和容器流體。要解決第二個問題，您錯過了第二組選項卡上的部分data-toggle="tab"和.tab-pane。

我也將您的第一個導航從.nav-tabs更改爲.nav。導航標籤四捨五入等，這裏並不是真的需要。另外我刪除了幾乎所有的CSS，並更多地依賴Bootstrap。

<div class="container-fluid"> 
    <div class="row"> 
    <!-- Nav left --> 
    <ul class="nav col-md-2" id="leftTabs"> 
     <li class="active"> 
     <a href="#a_tab" data-toggle="tab"> 
      <span></span>ItemA 
     </a> 
     </li> 
     <li> 
     <a href="#b_tab" data-toggle="tab"> 
      <span></span>ItemB 
     </a> 
     </li> 
     <li> 
     <a href="#c_tab" data-toggle="tab"> 
      <span></span>ItemC - TABS! 
     </a> 
     </li> 
    </ul> 
    <!-- Nav content --> 
    <div class="tab-content col-md-10"> 
     <div class="tab-pane active" id="a_tab"> 
     <h1>Content of A</h1> 
     </div> 
     <div class="tab-pane" id="b_tab"> 
     <h1>Content of B</h1> 
     </div> 
     <div class="tab-pane" id="c_tab"> 
     <!-- Nav tabs --> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a href="#first" data-toggle="tab">First</a></li> 
      <li><a href="#second" data-toggle="tab">Second</a></li> 
      <li><a href="#third" data-toggle="tab">Third</a></li> 
     </ul> 
     <!-- Nav tabs content --> 
     <div class="tab-content"> 
      <div id="first" class="tab-pane active">Content of first</div> 
      <div id="second" class="tab-pane">Content of second</div> 
      <div id="third" class="tab-pane">Content of third</div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

DEMO