несколько панелей внутри вкладок ломает вкладки

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 divs были за пределами .tab-content div. Измененная вилка: http://www.bootply.com/WI7OzQ0nqu