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

ブートストラップによるスクロール可能なメニュー: コンテナ拡張の問題への対処

概要

スクロール可能なメニューの作成Bootstrap では、これが一般的な要件です。ただし、一部の実装では、スクロール可能なメニューによってコンテナが拡張され、望ましくない動作が発生することが観察されています。この記事は、この問題の解決策を提供することを目的としています。

コンテナ拡張の問題を理解する

質問で説明されている方法では、複数のネストされたドロップダウンを使用しています。スクロール可能なメニューに多数の項目が入力されると、メニュー要素によって外側のコンテナが拡張される可能性があります。この拡張は、ネストされたドロップダウン メニューの幅の増加に合わせて外側のコンテナの幅が調整されるために発生します。

解決策

この問題に対処するには、別の CSS クラスを使用します。スクロールメニューなどのスクロール可能なメニューに適用されます。このクラス内では、次の CSS プロパティを指定する必要があります:

.scroll-menu {
    height: auto;
    max-height: [desired height];
    overflow-y: auto;
}

更新された HTML:

次の HTML スニペットは、スクロール メニュー クラスを適用する方法を示しています。スクロール可能なメニュー:

<ul class="dropdown-menu scroll-menu">
    <!-- Scrollable menu items here -->
</ul>

代替アプローチ

さらに、次の代替アプローチも考慮できます:

• ブートストラップ5: max-height を使用してドロップダウンをスクロール可能にします:

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

• ブートストラップ 4: 特定のメニュー クラスで max-height を設定します:

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

• 水平メニュー: スクロール機能をネイティブに提供し、カスタム CSS の必要性を排除する水平メニューの使用を検討してください。

結論

提案された CSS クラスとプロパティをスクロール可能なメニューに適用することで、コンテナーの拡張の問題を解決できます。あるいは、推奨される代替アプローチでは、この問題に対処するスクロール可能なメニューを作成するための追加オプションが提供されます。

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