帶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>
與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中文網其他相關文章!