JQuery 数据表隐藏 bootstrap 下拉列表

Question

当 jquery 数据表的 scrollX 属性设置为 true 时，我运行遇到了隐藏 bootstrap 下拉菜单的问题。请参阅下面的屏幕截图。有什么想法可以在将 scrollX 设置为 true 的同时解决此问题吗？

dataTable = $('#table').DataTable({
        "scrollX" : true
})

<div class="dropdown">
  <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li><a href="">Edit</a></li>
          <li><a href="">Delete</a></li>
          <li class="divider"></li>
          <li><a href="">Separated link</a></li>

  </ul>

示例： http://jsfiddle.net/dhL40g04/

Bootstrap scrollX = false 时显示的下拉菜单

Bootstrap 下拉列表在 scrollX = true 时隐藏

Answer 1

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

Demo

如果您希望菜单在不调整 table 大小的情况下工作，您需要将其标记移到 table 之外。您可以使用绝对定位来获得相同的位置。

JQuery 数据表隐藏 bootstrap 下拉列表

JQuery datatable hiding bootstrap dropdown

jquery

datatables

twitter-bootstrap