引导标签根据内容自动设置标签的高度

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> 

正如你可以看到没有任何标签最初有积极的课......其中一人必须有一个活跃的班级才能表现出来。

如果我添加一个活动的类到主页选项卡让我们说...然后当我点击其他选项卡时，它们的高度不会收缩或相应地扩展到选项卡的内容。相反，其他两个选项卡2有第一个选项卡（这是巨大的）的高度，如果我不喜欢这样写道：

<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个标签，它们保持与第一个标签相同的高度，并且水平滚动是一英里长...

W我可以做什么来解决这个问题？

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