Jquery 引导选项卡根据内容自动设置选项卡高度

我有如下引导选项卡：

<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 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>

...
...
...

---

哪个版本？@DaniP Bootstrap v3.3.7我忘了提到它，我有这个标签，只是忘了把它添加到这里。。。一切都是一样的=（Dani，也许我可以重写活动类，让它以某种方式自动调整身体高度？@User987，但是你检查过bootply上的示例了吗？你能在那里回复你的代码吗？@User987你可能需要检查bootstrap之外的东西，比如你是否更改了这些元素的css？chrome上的inspector显示了什么？你有什么发现吗可以改变这些元素大小的函数？可能针对所有的DI或类似的东西？在bootply上包含所有代码，甚至包括自定义js操作和自定义css，这样我们可以帮助您调试NICE…很高兴能帮助您@User987

<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>

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

<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>