如何防止引导下拉菜单在使其可滚动时展开其容器？-css教程-PHP中文网

如何防止引导下拉菜单在使其可滚动时展开其容器？

Barbara Streisand

发布： 2024-10-29 08:16:02

原创

966 人浏览过

How to Prevent a Bootstrap Dropdown Menu from Expanding its Container when Making it Scrollable?

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

使用 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中文网其他相关文章！