如何使用 Bootstrap 创建可滚动菜单而不扩展其容器？-css教程-PHP中文网

如何使用 Bootstrap 创建可滚动菜单而不扩展其容器？

Patricia Arquette

发布： 2024-10-27 05:36:29

原创

1062 人浏览过

How to Create a Scrollable Menu with Bootstrap Without Expanding Its Container?

使用 Bootstrap 的滚动菜单 - 菜单扩展容器

问题

使用提供的方法使用 Bootstrap 创建滚动菜单导致菜单在不扩展其容器时扩展其容器。如何解决此问题？

Bootstrap 5 的解决方案

对于 Bootstrap 5，应用以下 CSS：

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

登录后复制

Bootstrap 4 的解决方案

对于 Bootstrap 4，应用与上面相同的 CSS。

Bootstrap 3 的替代解决方案

或者，对于 Bootstrap 3，添加以下 CSS 和 HTML：

CSS

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

登录后复制

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="#">Another action</a></li>
</ul>

登录后复制

以上是如何使用 Bootstrap 创建可滚动菜单而不扩展其容器？的详细内容。更多信息请关注PHP中文网其他相关文章！