Question

我有以下引导标签：

<ul class="nav nav-tabs">
  <li><a data-toggle="tab" href="#home">Tab home</a></li>
  <li><a data-toggle="tab" href="#menu1">Tab menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Tab menu 2</a> </li>
  <div class="input-group" style="margin-bottom: 0 !important;margin-top: 5px;padding-left:50px;">
      <input type="text" class="form-control txtSearch" placeholder="Search for...">
      <span class="input-group-btn">
          <button class="btn btn-default btnSearchAgain" type="button" style="border: 1px #cfcfcf solid !important;padding: 6px !important;">Search</button>
      </span>
  </div>
</ul>

标签本身看起来像这样：

<div id="home" class="tab-pane fade in"> </div>
<div id="menu1" class="tab-pane fade "> </div>
<div id="menu1" class="tab-pane fade "> </div>

正如你所看到的那样，没有一个标签最初有活动类...而且其中一个有我的活动课程才能显示它。

如果我确实将一个活动类添加到主页选项卡，请说...然后当我单击其他选项卡时，它们的高度不会缩小或相应地扩展到选项卡的内容。相反，如果我这样做，其他两个标签都有第一个标签的高度（这是巨大的）：

<div id="home" class="tab-pane fade in active"> </div>
<div id="menu1" class="tab-pane fade "> </div>
<div id="menu1" class="tab-pane fade "> </div>

请注意，我将活动类添加到第一个标签...

我的问题是，如何让所有标签自动调整大小，以便在点击它们时填充它们？

如果我没有向它们添加任何活动类，那么调整大小选项是有效的，但是如果我确实通过HTML或jQuery活动类添加它们，那么我遇到麻烦并且调整大小选项不起作用..

我在jQuery中尝试过这个：

$('.nav-tabs a[href="#home"]').tab('show');

第一个标签页显示在加载页面时，但是我再次面临同样的问题，点击其他2个标签，它们与第一个标签保持相同的高度，水平滚动是一英里长......

我该怎么做才能解决这个问题？

Answer 1

好像你错过了标签内容面板所需的容器：

<div class="tab-content">

使用它来包装标签的内容将解决问题，您的标记必须如下：

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    ...
  </div>
  <div id="menu1" class="tab-pane fade">
    ...
  </div>
  <div id="menu2" class="tab-pane fade">
    ...
  </div>
</div>

<强> Bootply Demo

Bootstrap选项卡根据内容自动设置选项卡高度

1 个答案: