Bootstrap 表内的引导下拉列表不适用于,表响应

46qrfjad  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(4)|浏览(195)

下面是指向该示例的链接。http://www.codeply.com/go/uBnL1bBs6v
从这里你可以看到,当我应用一个层<div calss="table-responsive"></div>来 Package 表格时,下拉菜单被切断了。
如果您移除 Package 函数<div class="table-responsive"></div>,下拉式清单会正常运作。
我想知道什么会是问题,我如何解决它?我添加了表响应类,因为我需要的功能,以滚动列之间,因为我有很多列。
任何帮助都将不胜感激。

r6l8ljro

r6l8ljro1#

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

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

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

**注意:**在您的演示中,主体高度非常小,因此下拉菜单可能仍被视为隐藏。请为您的主体给予一些高度(用于演示)。

添加此

body{
    height:500px;
}
anauzrmj

anauzrmj2#

显然,table-responsive类与table类产生了冲突。我将研究更好的方法来解决它,但目前您可以简单地将height: 200px应用到table来解决问题。

9o685dep

9o685dep3#

使用此CSS代码

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

fafcakar4#

只需将table-responsive类添加到overflow: visible

相关问题