ホームページ > 記事 > ウェブフロントエンド > ブートストラップのスクロール可能なメニューコンテナの拡張を防ぐにはどうすればよいですか?
ブートストラップによるスクロール可能メニュー: コンテナーの拡張の防止
元の問題:
実装の試み特定のメソッドを使用したブートストラップでスクロール可能なメニューを実行すると、メニューのコンテナが不要に拡張されてしまいます。
解決策:
この問題を解決するには、CSS プロパティを直接適用できます。スクロール可能なメニュー クラスに追加します:
<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>
Bootstrap と互換性のある代替アプローチ:
Bootstrap 4/5:
.dropdown で max-height を設定します。メニュークラス:
<code class="css">.dropdown-menu { max-height: 280px; overflow-y: auto; }</code>
フレックスボックスを使用した水平メニュー:
水平メニューの代替としてフレックスボックスの使用を検討してください:
https://codeply. com/p/shJzHGE84z
以上がブートストラップのスクロール可能なメニューコンテナの拡張を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。