Comment fermer Responsive Nav avec le menu Produits en cliquant sur Bootstrap ?

Fermeture de Responsive Nav avec le menu Produits Cliquez dans Bootstrap

Lorsque vous développez le menu principal en mode réactif, vous pouvez rencontrer des problèmes de réduction automatique lorsque en cliquant sur l'élément de menu "PRODUITS". Pour résoudre ce problème, vous pouvez exploiter les attributs et classes de données intégrés de Bootstrap.

Au lieu d'utiliser du JavaScript supplémentaire, ajoutez les attributs de données suivants aux éléments de votre liste de menu :

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

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

Ajustements supplémentaires pour une conception réactive

Pour résoudre les problèmes de débordement de contenu et de scintillement sur des écrans plus grands, utilisez le code suivant :

<li><a href="#products">

Cela attribue des attributs de données spécifiques en fonction de la taille de l'écran, éliminant ainsi les problèmes dans les menus du bureau.

Mise à jour pour les versions Bootstrap

Pour les versions Bootstrap 4.1.3 et 5.0 , remplacez les classes visibles/cachées par d-none d-sm-block et d-block d-sm-none.

Dans Bootstrap 5, modifiez les attributs de données en data-bs-toggle et data-bs -target.

Avec ces ajustements, vous pouvez fermer automatiquement la barre de navigation réactive et afficher le menu du produit sans problèmes fonctionnels sur différentes tailles d'écran.

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!