如何防止 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 55:Bootstrap > 使用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中文網其他相關文章！