为什么滚动时下拉列表粘在顶部和底部？答案

【问题标题】：Why the drop-down list is sticking to top and bottom when scrolling?为什么滚动时下拉列表粘在顶部和底部？
【发布时间】：2022-01-11 14:03:37
【问题描述】：

打开下拉列表后，滚动列表时会粘在 div 的顶部或底部。我尝试更改父 div 和下拉列表的位置。但是想不通。有什么方法可以让下拉列表随按钮一起滚动？

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <div class="card"> 
  <div class="dropdown mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
    </div>
  </div>
  <div class="dropdown mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
    </div>
  </div>
  <div class="dropdown mb-3">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
    </div>
  </div>
</div>
</body>
</html>

.card {
    height: 150px;
    width: 30%;
    border: 2px solid black;
    margin: 100px 0px 0px 100px;
    overflow: auto;
}

【问题讨论】：

标签： html css bootstrap-4 drop-down-menu dropdown

【解决方案1】：

当菜单超出边界时，bootstrap的js通过调整位置使其粘在边界上以保持菜单不变。

当它超出边界时，bootstarp 将x-out-of-boundaries 属性识别出来。

您可以使用它来实现它。

.dropdown-menu[x-out-of-boundaries] {
    transform: translate3d(0px, 30px, 0px) !important;
}

你可以随意调整位置。

Here 就是一个例子。

【讨论】：