当视口底部没有空间容纳下拉菜单时，它会显示在下拉按钮的顶部。是否可以改变这种行为并使下拉菜单始终出现在底部？
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
对于 Bootstrap 5 (≥ 5.0)
完全禁用波普尔.js通过设置动态定位data-bs-display="static" on dropdown-toggle元素（按钮或链接）。
From Bootstrap 5 文档 > 下拉菜单：选项 https://getbootstrap.com/docs/5.1/components/dropdowns/#options:
默认情况下，我们使用波普尔.js用于动态定位。禁用此功能static.
.window {
height: 8em;
overflow: auto;
margin: 1em;
padding: 1em;
border: 10px solid #DFEAF2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="window">
<div class="dropdown">
<button data-bs-display="static" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown dropdown-toggle with data-bs-display="static"
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
对于 Bootstrap 4 (4.1 - 4.6)
完全禁用波普尔.js通过设置动态定位data-display="static" on dropdown-toggle元素（按钮或链接）。
From Bootstrap 4 文档 > 下拉菜单：选项 https://getbootstrap.com/docs/4.6/components/dropdowns/#options:
默认情况下，我们使用波普尔.js用于动态定位。禁用此功能static.
.window {
height: 8em;
overflow: auto;
margin: 1em;
padding: 1em;
border: 10px solid #DFEAF2;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="window">
<div class="dropdown">
<button data-display="static" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown dropdown-toggle with data-display="static"
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
