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

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

Barbara Streisand

リリース： 2024-10-29 08:16:02

オリジナル

942 人が閲覧しました

How to Prevent a Bootstrap Dropdown Menu from Expanding its Container when Making it Scrollable?

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 サイトの他の関連記事を参照してください。