打开下拉列表后，滚动列表时，列表会粘在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;
}
当菜单超出边界时，bootstrap的js会通过调整位置使其坚守边界以保持菜单不变。
当它超出边界时，bootstarp放入x-out-of-boundaries属性来识别它
你可以用这个来实现它。
.dropdown-menu[x-out-of-boundaries] {
transform: translate3d(0px, 30px, 0px) !important;
}
您可以根据需要调整位置。
下面是一个例子。