使用 Bootstrap 实现可滚动菜单时，避免菜单扩展其容器的问题至关重要。这是直接解决此问题的解决方案：
在 CSS 中，将以下样式添加到可滚动菜单类：
<code class="css">.scrollable-menu {
height: auto;
max-height: <desired max-height>;
overflow-x: hidden;
}</code>例如：
<code class="css">.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}</code>在 HTML 中，将可滚动菜单类应用到要使其可滚动的下拉菜单：
<code class="html"><ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Action</a></li> ... <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul></code>
通过这些更改，可滚动菜单的最大高度将为 200 像素，从而防止其展开含有容器。根据需要调整 max-height 属性以满足您的设计要求。
以上是如何防止引导下拉菜单在使其可滚动时展开其容器？的详细内容。更多信息请关注PHP中文网其他相关文章！
