ブートストラップのスクロール可能なメニューコンテナの拡張を防ぐにはどうすればよいですか?

ブートストラップによるスクロール可能メニュー: コンテナーの拡張の防止

元の問題:

実装の試み特定のメソッドを使用したブートストラップでスクロール可能なメニューを実行すると、メニューのコンテナが不要に拡張されてしまいます。

解決策:

この問題を解決するには、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 サイトの他の関連記事を参照してください。