Css 选项卡内的多个面板打断选项卡

我正在尝试使用带引导选项卡的引导面板。当一个面板位于选项卡中时，它可以正常工作，但只要我将另一个面板粘贴到选项卡中，选项卡功能就会中断：

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#contact" role="tab" data-toggle="tab">Contact Information</a></li>
  <li><a href="#lead" role="tab" data-toggle="tab">Lead History</a></li>
  <li><a href="#client" role="tab" data-toggle="tab">Client History</a></li>
</ul>
<div class="tab-content" style="margin-top: 2em;">
  <div class="tab-pane active" id="contact">
    <div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div class="panel panel-default">
        <div class="panel-heading">Contact Information</div>
        <div class="panel-body">
          <div class="well">

          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">Open Tasks</div>
          <div class="panel-body">

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">

  </div>
</div>
  </div>
  <div class="tab-pane" id="lead">
    <h1>Hello World</h1>
  </div>
  <div class="tab-pane" id="client">
        <h1>Hello World Again</h1>

  </div>
</div>

联系方式
开放任务
你好，世界
再次向世界问好

以下是演示选项卡如何断开的演示：

---

一旦删除col-md-4类中的第二个面板默认值，选项卡就会再次工作。如何在一个选项卡中有多个面板并使选项卡继续工作？

您的最后两个

。选项卡窗格
div不在
范围内。选项卡内容
div。编辑的fork：