首頁 > web前端 > css教學 > 主體

如何防止 Bootstrap 可滾動式選單展開其容器?

Mary-Kate Olsen
發布: 2024-10-29 22:42:02
原創
454 人瀏覽過

How to Prevent Bootstrap Scrollable Menu from Expanding its Container?

帶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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!