在前端开发中，Bootstrap 是非常流行的框架之一。它提供了许多易于使用和美观的组件，如下拉菜单和响应式表格。然而，当这些组件结合在一起时，可能会遇到一些问题。本文将介绍如何解决 Bootstrap 按钮下拉菜单在响应式表格中由于滚动而不可见的问题。
问题描述
问题出现在当一个响应式表格包含一个按钮下拉菜单时，如下图所示：
可以看到，当我们拖动表格时，除了表头外，表格的其余部分被隐藏了。但是下拉菜单却没有跟随表格一起滚动，并且因为受到表格上边缘的限制而无法显示完整的下拉菜单。
解决方案
方案一：增加样式
要解决这个问题，我们可以添加一些 CSS 样式来控制下拉菜单。具体来说，我们可以添加以下样式：
-------------- - --------- --------- -------- ----- -
这将使下拉菜单脱离文档流并覆盖在顶部，使其不受表格上边缘的限制。但是，在这种情况下，下拉菜单将无法跟随滚动。为了解决这个问题，我们可以添加一些 JavaScript 代码来实现这个功能：
---------------------------- -
--------------------------------- ----------- -
--- --------- - -----------------------------------
--- --------- - ------- - -------------------
---------------
--------- -----------
---- ----------
----- -------
------ -----
---
---
---此代码将在下拉菜单被点击时执行，并计算出下拉菜单的纵向位置，并将其设置为绝对定位。这将使下拉菜单始终位于按钮的上方。
方案二：使用 Popper.js
另一种解决方法是使用 Popper.js，一个用于创建弹出式工具提示和下拉菜单的库。为了使用 Popper.js，我们需要先引入它：
------- -----------------------------------------------------------------------------
然后，我们需要给每个下拉菜单元素添加一个 data-boundary 属性，以告诉 Popper.js 在哪里放置下拉菜单。例如：
---- -----------------
-------
---------- ------------- ----------------
-------------
-----------------------
----------------------
--------------------
---------------------
-
-------- ------
---------
----
---------------------
------------------------------------
------------------------
-
-- --------------------- -------------------
-- --------------------- ---------------- ----------
-- --------------------- ------------------ ---- --------
------
------这将使 Popper.js 将下拉菜单限制在视口中，并且不会被表格上边缘的限制所影响。我们还需要添加以下 JavaScript 代码来启用 Popper.js：
---------------------------- -
--- --------- - ---------------------------------------
--------------------------------------- ------------------ -
--- ------ - -------------------------------------------
--- ---- - -----------------------------------------
--- -------------- ----
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------