如何始终保持Bootstrap下拉列表

Question

我们正在使用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%; } 的类，它看起来像这样：

{{1}}

Answer 1

我找到了答案。首先，将btn-group的{​​{1}} css规则从position更改为relative。

inherit