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

Posted 2023-05-08

【中文标题】Bootstrap选项卡根据内容自动设置选项卡高度

【英文标题】：Bootstrap tab automatically set tab height according to the content

【发布时间】：2017-07-27 20:16:08

【问题描述】：

我有如下引导标签：

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

我能做些什么来解决这个问题？？

【问题讨论】：

哪个版本？

@DaniP Bootstrap v3.3.7

【参考方案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

【讨论】：

我忘了说，我有这个标签，只是忘记添加到这里...一切还是一样=（

Dani，也许我可以重写活动类来告诉它以某种方式自动调整身体的高度？

@User987 但是您检查过 bootply 上的示例吗？你能在那里回复你的代码吗？

@User987 您可能需要查看引导程序之外的内容，例如您是否更改了这些元素的 CSS？什么向您展示了 chrome 上的检查员？你有什么功能可以改变这些元素的大小吗？也许针对所有dis或类似的东西？在 bootply 中包含您的所有代码，甚至是您的自定义 js 操作和自定义 css，这样我们就可以帮助您调试

很好......很高兴帮助你的小伙伴@User987