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

Question

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

3

我有以下类似的Bootstrap选项卡：

<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');

页面加载时，第一个选项卡“主页”会显示出来。但是，当我点击其他两个选项卡时，它们的高度仍然与第一个选项卡相同，并且水平滚动条很长......

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

- User987

哪个版本？ - DaniP

@DaniP Bootstrap v3.3.7 - User987

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DaniP · Accepted Answer

看起来您缺少选项卡内容面板所需的容器：

<div class="tab-content">

将选项卡内容用<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