制表符内的多个面板打破制表符

Question

我正在尝试将引导面板与引导选项卡一起使用。当一个面板在选项卡中时它工作正常，但是一旦我将另一个面板粘贴在选项卡中，选项卡功能就会中断：

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

这是显示标签如何中断的演示：

http://www.bootply.com/oCwV3bLFQl

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

Answer 1

您的最后两个 .tab-pane div 超出了 .tab-content div。编辑分叉：http://www.bootply.com/WI7OzQ0nqu