Comment empêcher la fermeture automatique du menu réactif Bootstrap sur le bureau ?

Fermeture automatique du menu réactif dans Bootstrap

Problème :

Dans un site Web Bootstrap, le menu réactif ouvre une barre blanche lorsque l'on clique sur le bouton "PRODUITS". Cependant, lorsque le site Web est en mode bureau, cliquer sur le bouton réduit involontairement le menu.

Solution :

Pour éviter que le menu ne s'effondre lorsque vous cliquez sur un bureau, évitez d'ajouter du JavaScript supplémentaire. Au lieu de cela, modifiez les éléments de la liste de menu pour inclure les sélecteurs de basculement de données et de cible de données. Par exemple :

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

Répétez cette étape pour chaque élément de menu.

Solution étendue pour résoudre les problèmes de débordement :

Pour résoudre les débordements et le scintillement problèmes, incorporez le code suivant :

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

Cela rend les sélecteurs de bascule et de cible spécifiques à la taille de l'écran, éliminant ainsi les problèmes sur les écrans plus grands.

Compatibilité des versions Bootstrap :

Notez que les classes visibles/cachées sont obsolètes dans les versions Bootstrap 4.1.3 et 5.0. Utilisez d-none d-sm-block au lieu de Hidden-xs et d-block d-sm-none au lieu de visible-xs. Dans Bootstrap version 5, remplacez data-toggle par data-bs-toggle et data-target par data-bs-target.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!