Css 如何使引导下拉列表始终位于顶部

我们使用的是Bootstrap 3下拉菜单，但是，当页面宽度不够大时，容器

div

显示一个水平滚动条时，它看起来是这样的。请注意，它不是浏览器窗口的滚动条。滚动条剪辑下拉列表，如下所示：

我已经选中了

下拉菜单

，该菜单与作为下拉菜单的

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

---

我找到了答案。首先，将

btn组

的

位置

css规则从

相对

更改为

继承

$("#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);
});

$（“#下拉菜单”）。打开（“show.bs.dropdown”，函数（）{
//对于偏移和位置之间的差异：http://stackoverflow.com/a/3202038/44852
var dropdownButtonPosition=$（this.position（）；
var dropdownButtonOffset=$（this.offset（）；
var dropdownButtonHeight=$（this）.height（）；
var dropdownMenu=$（this.find（“.dropdownMenu:first”）；
var dropdownmenuuheight=dropdownMenu.height（）；
var scrollToTop=$（document.scrollTop（）；
//似乎有一些数字没有包括在内，所以我使用了一些容忍度
//更准确的结果。
var高度公差=17；
//我认为window.innerHeight在Chrome上更精确
//但它在Internet Explorer上不可用。因此我使用$（window）.height（）
//方法，其中window.innerHeight不可用。
var visibleWindowHeight=window.innerHeight | |$（window.height（）；
var TotalHeightDropDownAccounts=下拉菜单高度+
dropdownButtonOffset.top+dropdownButtonHeight+高度公差-滚动到顶部；
//如果有足够的高度使下拉列表完全显示，则在下拉按钮下显示，
//否则在下拉按钮上方显示。
var dropdownMenuTopLocation=总高度DropDownOccesss

——也可以看到最后一条评论，在问题解决后，这提供了一些jquery来解决某些情况，我认为您无法解决

.table responsive

需要

overflow-y

才能工作，但显然会隐藏您的下拉列表，因此除非您找到涉及jQuery或JS的解决方案，否则我认为这是不可能的。所以，您是一个经验丰富的用户，您知道需要更多的代码来解决您的问题。不管怎么说，这里有一个Bootply供任何想尝试@Tarik的人使用，我知道你并不是出于恶意，因此有“经验丰富的用户”的评论以及我为什么添加代码，我的意思是HTML是等式的主要部分，因为通过查看你的图像，在第一眼看到的时候，有一种东西跳转到了视图中：你真的不需要一个宽的表（因此溢出），因此在我看来，你添加了一层复杂的东西，你只需要使用你需要的宽度就可以很容易地解决，而不需要其他东西。或者更好：为什么要为非表格数据的内容创建一个表？如果将position:absolute添加到.btn组div中，这似乎在@Fabio的Bootply中起作用