以下是文章的一些标题选项，请记住问答格式和内容： 直接、简洁： * Bootstrap 中的可滚动菜单：如何修复容器扩展？ * 嘘

使用 Bootstrap 的可滚动菜单：解决菜单扩展问题

之前尝试使用 Bootstrap 实现可滚动菜单导致菜单扩展其容器。这种行为是不可取的，特别是与不出现此问题的不可滚动菜单相比。

解决策略

要解决此问题，有两种方法主要做法：

1.更新 CSS 属性

只需将特定 CSS 属性添加到可滚动菜单类即可解决问题。

<code class="css">.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}</code>

2.利用 Bootstrap 更新

Bootstrap 随着时间的推移不断发展，引入了对下拉标记的更改。根据当前版本更新标记和 CSS 可以确保兼容性并解决问题。

对于 Bootstrap 5：

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

对于 Bootstrap 4：

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

使用 Flexbox 的 Bootstrap 4 的替代水平菜单

此替代菜单布局利用 Flexbox 进行菜单设计。它提供了一种在 Bootstrap 框架内创建可滚动菜单的不同方法。

以上是以下是文章的一些标题选项，请记住问答格式和内容： 直接、简洁： * Bootstrap 中的可滚动菜单：如何修复容器扩展？ * 嘘的详细内容。更多信息请关注PHP中文网其他相关文章！