如何防止引導下拉選單在使其可捲動時展開其容器？

使用 Bootstrap 的可滾動選單 - 防止容器擴充

使用 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中文網其他相關文章！