jquery - 如何使 Bootstrap 网格在选项卡 Pane 中按预期工作？

Question

我见过一些与此类似的问题，但没有遇到与我见过的完全相同的问题。

我已经知道如何使网格(或多或少)在选项卡 Pane 中工作。但是，它们似乎并没有像我预期的那样工作。我希望看到的是一组选项卡，每个选项卡都使用自己的个人空间来显示包含网格的数据。相反，我看到的是带有试图共享同一网格空间的数据的选项卡集，因此数据行正在堆叠，以便将它们向下推到页面上。整个选项卡区域将是所需高度的两倍，Tab2 上的数据位于选项卡 Pane 的下半部分，而上半部分是空的(或者将保存 Tab1 的数据)。

例子:

<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">

      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
        <li><a data-toggle="tab" href="#tab2">Tab2</a></li>
      </ul>

      <div id="tab-content">
        <div id="tab1" class="tab-pane fade in active">
          <div class="row">
            <div class="col-sm-6">
             ...tab1, col1 information...
            </div>
            <div class="col-sm-6">
             ...tab1, col2 information...
            </div>
          </div>
        </div>
        <div id="tab2" class="tab-pane fade in active">
          <div class="row">
            <div class="col-sm-6">
             ...tab2, col1 information...
            </div>
            <div class="col-sm-6">
             ...tab2, col2 information...
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

我想弄清楚的是我的代码是否有误，或者 Bootstrap 是否根本不支持我想要完成的事情。我已经测试了删除 .row div 的想法，但没有成功。 (数据堆叠不均匀，而不是留在单独的行中。)似乎 .col*-* 类无法共享相同的空间，即使隐藏时也是如此。

有什么想法吗？

Answer 1

您在带有选项卡的容器上缺少 .tab-content 类，它将 display:none 应用于隐藏的选项卡。此外，您的两个选项卡都有 active 类，这使得它们都显示在开头。

这是标记:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">

      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1">Tab1</a>
        </li>
        <li><a data-toggle="tab" href="#tab2">Tab2</a>
        </li>
      </ul>

      <div id="tab-content" class="tab-content">
        <div id="tab1" class="tab-pane fade in active">
          <div class="row">
            <div class="col-sm-6">
              ...tab1, col1 information...
            </div>
            <div class="col-sm-6">
              ...tab1, col2 information...
            </div>
          </div>
        </div>
        <div id="tab2" class="tab-pane fade">
          <div class="row">
            <div class="col-sm-6">
              ...tab2, col1 information...
            </div>
            <div class="col-sm-6">
              ...tab2, col2 information...
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>