多个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