ブートストラップを使用したスクロール可能なメニュー: メニュー拡張の問題への対処
ブートストラップを使用してスクロール可能なメニューを実装しようとした以前の試みでは、メニューのコンテナが拡張されました。 。この動作は、特にこの問題が発生しないスクロール不可能なメニューと比較した場合、望ましくないものです。
解決策
この問題に対処するには、2 つの方法があります。主なアプローチ:
1. CSS プロパティの更新
スクロール可能なメニュー クラスに特定の CSS プロパティを追加するだけで、問題を解決できます。
<code class="css">.scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; }</code>
2.ブートストラップのアップデートを利用する
ブートストラップは時間の経過とともに進化し、ドロップダウン マークアップに変更が加えられました。現在のバージョンに従ってマークアップと CSS を更新すると、互換性が確保され、問題に対処できます。
Bootstrap 5 の場合:
<code class="css">.dropdown-menu { max-height: 280px; overflow-y: auto; }</code>
Bootstrap 4 の場合:
<code class="css">.dropdown-menu { max-height: 280px; overflow-y: auto; }</code>
Flexbox を使用したブートストラップ 4 の代替水平メニュー
この代替メニュー レイアウトは、メニュー デザインに Flexbox を利用します。これは、Bootstrap フレームワーク内でスクロール可能なメニューを作成するための異なるアプローチを提供します。
以上が質問と回答の形式と内容を考慮した、記事のタイトルのオプションをいくつか示します。 直接的かつ簡潔: * ブートストラップのスクロール可能なメニュー: コンテナーの拡張を修正するにはどうすればよいですか? *ブーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。