打開下拉串列后，滾動串列時會粘在 div 的頂部或底部。我嘗試更改父 div 和下拉串列的位置。但是想不通。有沒有辦法讓下拉串列與按鈕一起滾動？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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;
}
uj5u.com熱心網友回復：
當選單超出邊界時，bootstrap 的 js 通過調整位置使其堅持邊界以保持選單保持不變。
當它超出邊界時，bootstarp putx-out-of-boundaries屬性來識別它。
您可以使用它來實作它。
.dropdown-menu[x-out-of-boundaries] {
transform: translate3d(0px, 30px, 0px) !important;
}
您可以根據需要調整位置。
這是一個例子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408402.html
標籤：