Css 多个引导选项卡-垂直和；水平的

在AngularJS+引导项目中，我尝试在左侧创建垂直导航菜单/选项卡，而其中一个选项卡的内容应该有自己的选项卡（辅助选项卡），水平

我的问题：
1.辅助选项卡的内容显示在所需位置之外
2.辅助选项卡中的导航不起作用

您可以在此处查看我的代码：

---

主导航条（垂直）工作正常（如所示：）

要解决第一个问题，您需要将第一个导航向左浮动。我通过在导航和选项卡内容周围使用Bootstrap的

col-md-2

和

col-md-10

以及布局所必需的行和容器流体解决了这个问题。为了解决第二个问题，您遗漏了第二组选项卡上的一些

data toggle=“tab”

和

.tab窗格

我还将您的第一个导航从
.nav tabs
更改为
.nav
。导航标签环绕角落等，这里并不真正需要。另外，我删除了几乎所有的CSS，更多地依赖于引导

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










内容
B的含量





第一部分的内容
第二部分的内容
第三部分的内容

要解决第一个问题，您需要将第一个导航向左浮动。我通过在导航和选项卡内容周围使用Bootstrap的
col-md-2
和
col-md-10
以及布局所必需的行和容器流体解决了这个问题。为了解决第二个问题，您遗漏了第二组选项卡上的一些
data toggle=“tab”
和
.tab窗格

我还将您的第一个导航从
.nav tabs
更改为
.nav
。导航标签环绕角落等，这里并不真正需要。另外，我删除了几乎所有的CSS，更多地依赖于引导

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










内容
B的含量





第一部分的内容
第二部分的内容
第三部分的内容

是的，就是这样。谢谢是的，就是这样。谢谢