如何使 Bootstrap 下拉菜单始终位于顶部答案

【问题标题】：How to keep Bootstrap dropdown always on top如何使 Bootstrap 下拉菜单始终位于顶部
【发布时间】：2014-09-26 18:24:16
【问题描述】：

我们使用的是 Bootstrap 3 Dropdown，但是当页面宽度不够大时容器div 显示水平滚动条时，它看起来像这样。请注意，它不是浏览器窗口的滚动条。滚动条剪辑下拉菜单，如下所示：

我检查了dropdown-menu，它与下拉列表中的ul 元素相关联，对我来说它看起来不错：

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 15px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #999999;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

后来我检查了容器div 是否定义了任何z-index，但我找不到。但它有一个名为table-responsive 的类，它看起来像这样：

@media screen and (max-width: 1600px)
.table-responsive {
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
}

【问题讨论】：

github.com/twbs/bootstrap/issues/11037 -- 也看到最后的评论，在问题关闭后，这提供了一些 jquery 在某些情况下修复它
我不认为你可以。 .table-responsive 需要 overflow-y 才能工作，但显然会隐藏你的下拉菜单，所以除非你找到一些涉及 jQuery 或 JS 的解决方案，否则我认为这是不可能的
另外，你是一个经验丰富的用户，你知道你需要更多的代码来解决你的问题。无论如何，这里有一个 Bootply 适合任何想要尝试的人bootply.com/77Aldw2Mzl
@Tarik 我知道你没有恶意，因此“经验丰富的用户”评论以及我添加代码的原因，我的意思是 HTML 是等式的主要部分，因为通过查看您的图像，乍一看，有些东西会跳到视图中：您确实不需要宽桌子（因此会溢出），因此在我看来，您添加了一层复杂性，您可以通过以下方式轻松解决只使用您需要的宽度，仅此而已。甚至更好：为什么要为非表格数据创建表格？
如果将 position: absolute 添加到 .btn-group div，这似乎在 @Fabio 的 Bootply 中有效

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我找到了答案。首先，将btn-group的position css规则从relative改为inherit。

$("#dropdownMenu").on("show.bs.dropdown", function () {
    // For difference between offset and position: http://stackoverflow.com/a/3202038/44852
    var dropdownButtonPosition = $(this).position();
    var dropdownButtonOffset = $(this).offset();
    var dropdownButtonHeight = $(this).height();
    var dropdownMenu = $(this).find(".dropdown-menu:first");
    var dropdownMenuHeight = dropdownMenu.height();
    var scrollToTop = $(document).scrollTop();

    // It seems there are some numbers that don't get included so I am using some tolerance for
    // more accurate result.
    var heightTolerance = 17;

    // I figured that window.innerHeight works more accurate on Chrome
    // but it is not available on Internet Explorer. So I am using $(window).height() 
    // method where window.innerHeight is not available.
    var visibleWindowHeight = window.innerHeight || $(window).height();

    var totalHeightDropdownOccupies = dropdownMenuHeight +
        dropdownButtonOffset.top + dropdownButtonHeight + heightTolerance - scrollToTop;

    // If there is enough height for dropdown to fully appear, then show it under the dropdown button,
    // otherwise show it above dropdown button.
    var dropdownMenuTopLocation = totalHeightDropdownOccupies < visibleWindowHeight
        ? dropdownButtonPosition.top + dropdownButtonHeight
        : dropdownButtonPosition.top - dropdownMenuHeight - dropdownButtonHeight + heightTolerance;

    dropdownMenu.css("left", dropdownButtonPosition.left)
        .css("top", dropdownMenuTopLocation);
});

【讨论】：