デスクトップ上でブートストラップのレスポンシブ メニューが自動的に閉じるのを防ぐ方法は?

Bootstrap でのレスポンシブ メニューの自動終了

問題:

Bootstrap Web サイトで、 「製品」ボタンをクリックすると、レスポンシブ メニューに白いバーが開きます。ただし、Web サイトがデスクトップ モードの場合、ボタンをクリックすると意図せずメニューが縮小されます。

解決策:

デスクトップ上でクリックしたときにメニューが折りたたまれないようにするには、追加の JavaScript を追加しないでください。代わりに、メニュー リスト項目を変更して、データ切り替えセレクターとデータ ターゲット セレクターを含めます。例:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

メニュー項目ごとにこの手順を繰り返します。

オーバーフローの問題を修正するための拡張ソリューション:

オーバーフローとちらつきに対処するには問題がある場合は、次のコードを組み込んでください:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

これにより、トグルと画面サイズに固有のターゲット セレクターにより、大きな画面での不具合が解消されます。

ブートストラップ バージョンの互換性:

表示/非表示クラスはブートストラップ バージョン 4.1.3 では非推奨であることに注意してください。そして5.0。 hidden-xs の代わりに d-none d-sm-block を使用し、visible-xs の代わりに d-block d-sm-none を使用します。 Bootstrap バージョン 5 では、data-toggle を data-bs-toggle に、data-target を data-bs-target に置き換えます。

以上がデスクトップ上でブートストラップのレスポンシブ メニューが自動的に閉じるのを防ぐ方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。