使用 Bootstrap 實作可捲動選單時，避免選單擴充其容器的問題至關重要。這是直接解決此問題的解決方案：
在CSS 中，將以下樣式新增至可捲動選單類別：
<code class="css">.scrollable-menu {
height: auto;
max-height: <desired max-height>;
overflow-x: hidden;
}</code>例如：
<code class="css">.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}</code>在HTML 中，將可捲動選單類別套用到要使其可捲動的下拉選單：
<code class="html"><ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Action</a></li> ... <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul></code>
透過這些更改，可捲動選單的最大高度將為200 像素，從而防止其展開含有容器。根據需要調整 max-height 屬性以滿足您的設計要求。
以上是如何防止引導下拉選單在使其可捲動時展開其容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
