如何防止 Bootstrap 可滾動式選單容器擴充？

帶Bootstrap 的捲動選單：防止容器擴充

原始問題：

嘗試實作🎜>原始問題：

嘗試實作Bootstrap 的可滾動式選單使用某種方法會導致選單容器不必要的擴充。

解決方案：

<code class="css">.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}</code>

要解決此問題，您可以直接應用CSS 屬性到您的可滾動選單類別：

這將在自己的空間中包含選單，防止其擴展容器。

<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>

更新的HTML：

與Bootstrap 相容的替代方法：

<code class="css">.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}</code>

在.dropdown 上設定max-height-選單類別：

使用Flexbox 的水平選單：

使用Flexbox 的水平選單：考慮使用Flexbox 作為水平選單替代方案：https://codeply。 com/p/shJzHGE84z

以上是如何防止 Bootstrap 可滾動式選單容器擴充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！