Question

我有一个带有下拉按钮的引导程序表。

我已将fixed-table-body上的overflow-y设置为可见，因此我没有得到滚动条。（感谢crazymatt，Bootstrap-table, overflow）

但我仍然希望overflow-x是auto，因为我有很多列。否则该网站在移动设备上变得非常丑陋 - 它不适合。我需要一个移动模式的滚动条。

当我使用时：

.fixed-table-body {
    overflow-x: visible;
    overflow-y: visible;
    height: 100%;
}

...桌子完全适合桌面和平板电脑（非移动设备） - 下拉按钮也适用

但是当我使用时：

.fixed-table-body {
    overflow-x: auto;
    overflow-y: visible;
    height: 100%;
}

...桌子非常适合桌面，平板电脑和移动设备。但是下拉列表不起作用。

我该如何解决这个问题？

Jsfiddle：https://jsfiddle.net/qr3ao2e3/2/

Answer 1

z-index可以解决您的问题。尝试使用下面的内容，看看它是否有效：

.fixed-table-body {
  overflow-x: auto;
  overflow-y: visible;
  height: 100%;
}
.table{
  position:relative;
  z-index:1;
}
.dropdown-menu{
  position:relative;
  z-index:2;
}

使用媒体查询仅在移动设备上应用它。

Answer 2

我这样解决了。解决方案并非最佳，但有效。

$('.dropdown').on({
    "shown.bs.dropdown": function() { $('.fixed-table-body').css('overflow-x','visible'); },
    "hide.bs.dropdown":  function() { $('.fixed-table-body').css('overflow-x','auto'); }
});

滚动，尽管溢出-y设置为可见

2 个答案: