如何防止 Bootstrap 可滚动菜单展开其容器？

带 Bootstrap 的滚动菜单：解决容器扩展问题

简介

创建滚动菜单在 Bootstrap 中是一个常见的需求。然而，在一些实现中，已经观察到可滚动菜单展开其容器，从而导致不期望的行为。本文旨在提供此问题的解决方案。

了解容器扩展的问题

在问题中描述的方法中，使用了多个嵌套下拉菜单-当可滚动菜单填充大量项目时，菜单元素可能会导致外部容器膨胀。发生这种扩展是因为外部容器的宽度会调整以适应嵌套下拉菜单不断增加的宽度。

解决方案

要解决此问题，可以使用单独的 CSS 类应用于可滚动菜单，例如scroll-menu。在此类中，应指定以下 CSS 属性：

.scroll-menu {
    height: auto;
    max-height: [desired height];
    overflow-y: auto;
}

更新的 HTML：

以下 HTML 片段演示了如何将滚动菜单类应用到可滚动菜单：

<ul class="dropdown-menu scroll-menu">
    <!-- Scrollable menu items here -->
</ul>

替代方法

此外，可以考虑以下替代方法：

• Bootstrap 5: 使用 max-height 使下拉菜单可滚动:​​

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

• Bootstrap 4: 在特定菜单类上设置 max-height:

.my-scrollable-menu {
    max-height: 280px;
    overflow-y: auto;
}

• 水平菜单：考虑使用原生提供滚动功能的水平菜单，从而无需自定义 CSS。

结论

通过将建议的 CSS 类和属性应用到可滚动菜单，可以解决容器扩展问题。或者，建议的替代方法提供了用于创建可解决此问题的可滚动菜单的附加选项。

以上是如何防止 Bootstrap 可滚动菜单展开其容器？的详细内容。更多信息请关注PHP中文网其他相关文章！