ブートストラップ ドロップダウン メニューをスクロール可能にしたときにコンテナが展開されないようにするにはどうすればよいですか?

Bootstrap を使用したスクロール可能なメニュー - コンテナの拡張の防止

Bootstrap を使用してスクロール可能なメニューを実装する場合、メニューがコンテナを拡張する問題を回避することが重要です。この問題に直接取り組む解決策は次のとおりです。

CSS で、スクロール可能なメニュー クラスに次のスタイルを追加します。

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

例:

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

これらの変更により、スクロール可能なメニューの高さは最大 200 ピクセルになり、入っている容器。設計要件に合わせて、必要に応じて max-height プロパティを調整します。

以上がブートストラップ ドロップダウン メニューをスクロール可能にしたときにコンテナが展開されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。