使用 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>對於Bootstrap 4:
對Bootstrap 4:
此替代選單佈局利用Flexbox 進行選單設計。它提供了一種在 Bootstrap 框架內建立可捲動功能表的不同方法。以上是以下是文章的一些標題選項,請記住問答格式和內容: 直接、簡潔: * Bootstrap 中的可滾動式選單:如何修復容器擴充功能? * 噓的詳細內容。更多資訊請關注PHP中文網其他相關文章!