首頁 > web前端 > css教學 > 如何使用 Bootstrap 建立可滾動式選單而不擴展其容器?

如何使用 Bootstrap 建立可滾動式選單而不擴展其容器?

Patricia Arquette
發布: 2024-10-27 05:36:29
原創
1062 人瀏覽過

How to Create a Scrollable Menu with Bootstrap Without Expanding Its Container?

使用Bootstrap 的捲動選單- 選單擴充容器

問題

使用提供的方法使用Bootstrap 建立滾動選單導致滾動導致驅動選單在不擴展其容器時擴展其容器。如何解決此問題?

Bootstrap 5 的解

對於Bootstrap 5,請使用下列CSS:

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}
登入後複製

Bootstrap 4 的解

Bootstrap 4 的解

對於應用與上面相同的CSS。

Bootstrap 3 的替代解

或者,對於Bootstrap 3,加入以下CSS 和HTML:

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}
登入後複製
HTML

以上是如何使用 Bootstrap 建立可滾動式選單而不擴展其容器?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板