表格中的引导下拉列表不适用于.table-responsive

Question

以下是实例的链接。 http://www.codeply.com/go/uBnL1bBs6v

从中我可以看到，当我应用图层<div calss="table-responsive"></div>来包装表格时，下拉列表会被截止。

如果删除包装器<div class="table-responsive"></div>，则下拉列表可以正常工作。

我想知道问题是什么，我该如何解决？ 我添加了表响应类，因为我需要函数在列之间滚动，因为我有很多列。

任何帮助都将不胜感激。

Answer 1

下拉列表隐藏在tr下。您必须将此position:relative设置为下拉列表，即ul元素。我已将此CSS规则添加到您的代码中。的 Working Demo

table.table ul.dropdown-menu{
    position:relative;
    float:none;
    max-width:160px;
}

在CSS规则中添加此内容，您会看到它已修复。

注意：在您的演示中，身高非常小，因此下拉可能仍被视为隐藏。给身体一些高度（用于演示）。

添加此

body{
    height:500px;
}

Answer 2

只需添加到table-responsive班级overflow: visible

即可

Answer 3

显然table-responsive类正在与班级table产生冲突。我将研究更好的解决方法，但目前您只需将height: 200px应用于table即可解决问题。