Twitter bootstrap 滚动，即使overflow-y设置为可见

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

我已经将固定表体上的overflow-y设置为可见，这样我就不会得到滚动条。（感谢crazymatt，）

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

当我使用：

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

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

…桌面和平板电脑（非移动设备）非常适合使用，下拉按钮也可以使用

但当我使用：

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

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

…这张桌子非常适合台式机、平板电脑和移动设备。但是下拉菜单不起作用

我怎样才能解决这个问题

---

jsFIDLE:

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;
}

---

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

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;
}

---

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

我是这样解决的。这个解决方案不是最优的，但有效

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

---

我是这样解决的。这个解决方案不是最优的，但有效

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

---

谢谢你，吉特什！但是当我点击下拉菜单时，表格看起来很奇怪。请参阅“希望您正在谈论的是小型设备视图”。这是因为您的下拉列表宽度大于列宽，当下拉列表打开时，它会尝试进行调整，从而拉伸列。您可以做的是将最小宽度设置为等于下拉列表宽度的列。如果您想要查看Lakshya的评论，请查看。再次感谢。但即使我改变了宽度设置，我仍然会遇到高度问题？下拉列表仍然显示在表格单元格中，而不是“在”所有内容之上的一个漂亮平滑的div？谢谢Jitesh！但是当我点击下拉菜单时，表格看起来很奇怪。请参阅“希望您正在谈论的是小型设备视图”。这是因为您的下拉列表宽度大于列宽，当下拉列表打开时，它会尝试进行调整，从而拉伸列。您可以做的是将最小宽度设置为等于下拉列表宽度的列。如果您想要查看Lakshya的评论，请查看。再次感谢。但即使我改变了宽度设置，我仍然会遇到高度问题？下拉列表仍然显示在表格单元格中，而不是一个漂亮平滑的div“高于”所有内容？这里有一些东西给你谢谢Lakshya。但是如果我从下拉改为下拉，问题将出现在顶部。请看顶部的“dropup”。一些像素消失了。这是给你的东西，谢谢Lakshya。但是如果我从下拉改为下拉，问题将出现在顶部。请看顶部的“dropup”。几个像素消失了。