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

带 Bootstrap 的滚动菜单：防止容器扩展

原始问题：

尝试实现Bootstrap 的可滚动菜单使用某种方法会导致菜单容器不必要的扩展。

解决方案：

要解决此问题，您可以直接应用 CSS 属性到您的可滚动菜单类：

<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>

与 Bootstrap 兼容的替代方法：

Bootstrap 4/5：

在 .dropdown 上设置 max-height-菜单类：

<code class="css">.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}</code>

使用 Flexbox 的水平菜单：

考虑使用 Flexbox 作为水平菜单替代方案：

https://codeply。 com/p/shJzHGE84z

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