【问题标题】：Bootstrap dropdown inside tabs is not visible选项卡内的引导下拉菜单不可见
【发布时间】：2013-12-04 13:26:58
【问题描述】：

我有tabs，我在其中放了一个dropdown 元素。问题是，下拉列表不可见。打开/关闭事件正在运行，但我没有看到列表。如果我将下拉菜单移到选项卡之外，它正在工作。怎么回事？

JavaScript

$(document).ready(function () {
    $('.tabs-student a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
});

HTML

<ul class="nav nav-tabs tabs-s">
  <li class="active"><a href="#tab-activity">A</a></li>
  <li class=""><a href="#tab-sales">B</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab-activity">
      <div class="btn-group left">
          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">test1
              <span class="caret caret-fix"></span>
           </button>
           <ul class="dropdown-menu class-list scrollable-menu center">
              <li><label id="1" class="link active">test1</label></li>
              <li><label id="2" class="link">test2</label></li>
           </ul>
       </div>
  </div>
  <div class="tab-pane" id="tab-sales">
     test
  </div>
</div>

【问题讨论】：

标签： twitter-bootstrap drop-down-menu tabs

【解决方案1】：

我不得不将.tab-content 类中的overflow 属性从hidden 更改为例如visible 在这种情况下

【讨论】：

【解决方案2】：

它应该可以在不覆盖.tab content 的overflow 属性的情况下工作。我注意到的唯一另一件事是您正在为 tabs-student 类初始化选项卡，但该类在您的标记中不存在。我认为这可能就是您在ul 元素中使用.tabs-s 的意图。当我改变它时，一切正常。

See this jsFiddle

这个JavaScript：

$('.tabs-student a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

应该对应这个HTML：

<ul class="nav nav-tabs tabs-student">
  <li class="active"><a href="#tab-activity">Activity</a></li>
  <li class=""><a href="#tab-sales">Sales</a></li>
</ul>

应该是这样的：

【讨论】：