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类中的第二个panel-default，标签就会再次运行。如何在选项卡中包含多个面板并使选项卡继续工作？

Answer 1

你的最后两个.tab-pane div在.tab-content div之外。编辑前叉：http://www.bootply.com/WI7OzQ0nqu

标签内的多个面板打破标签

1 个答案: