コンテナを展開せずにブートストラップでスクロール可能なメニューを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

コンテナを展開せずにブートストラップでスクロール可能なメニューを作成するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-10-27 05:36:29

オリジナル

1061 人が閲覧しました

How to Create a Scrollable Menu with Bootstrap Without Expanding Its Container?

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

問題

提供されたメソッドを使用して、Bootstrap を使用してスクロール可能なメニューを作成するその結果、コンテナが拡張されない場合でもメニューが拡張されます。これはどのように解決できますか?

Bootstrap 5 の解決策

Bootstrap 5 の場合は、次の CSS を適用します:

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

ログイン後にコピー

Bootstrap 4 の解決策

Bootstrap 4 の場合は、上記と同じ CSS を適用します。

Bootstrap 3 の代替ソリューション

または、Bootstrap 3 の場合は、次の CSS と HTML を追加します。

CSS

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

ログイン後にコピー

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="#">Another action</a></li>
</ul>

ログイン後にコピー

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