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

Question

这是现场示例的链接。 http://www.codeply.com/go/uBnL1bBs6v

从中您可以看到，当我应用图层

<div calss="table-responsive"></div>

包裹表格时，下拉菜单被截断。

如果去掉包装纸

<div class="table-responsive"></div>

，下拉菜单就可以正常工作。

我想知道会出现什么问题以及如何解决它？ 我添加了表格响应类，因为我需要在列之间滚动的功能，因为我有很多列。

如有任何帮助，我们将不胜感激。

Answer 1

使用这个CSS代码

.table-responsive>table .dropdown{position:static;}
.table-responsive>table .dropdown>.dropdown-menu{left:auto !important;top:auto !important;}

Answer 2

下拉菜单隐藏在 tr 下方。您必须将这个

position:relative

设置为下拉列表，即 ul 元素。我已将此 CSS 规则添加到您的 codeply 中。 工作演示

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

将其添加到 CSS 规则中，您会看到它已修复。

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

添加这个

body{
    height:500px;
}

Answer 3

显然

table-responsive

类正在与

table

类产生冲突。我会研究更好的方法来解决它，但目前您可以简单地将

height: 200px

应用于

table

来解决问题。

Answer 4

也许这会对某人有所帮助。请将 table-responsive 类替换为 table-active！

Answer 5

只需添加到

table-responsive

类

overflow: visible