Maison > interface Web > js tutoriel > Pourquoi la liste déroulante de ma barre de navigation ne s'effondre-t-elle pas dans Bootstrap 5 ?

Pourquoi la liste déroulante de ma barre de navigation ne s'effondre-t-elle pas dans Bootstrap 5 ?

Barbara Streisand
Libérer: 2024-11-16 06:48:02
original
650 Les gens l'ont consulté

Why is My Navbar Dropdown Not Collapsing in Bootstrap 5?

Dépannage de l'effondrement de la barre de navigation dans Bootstrap 5

Bootstrap 5 apporte des changements importants, notamment des modifications des attributs de basculement de données pour les plugins JavaScript. Résoudre le problème où la liste déroulante de la barre de navigation ne fonctionne pas dans Bootstrap 5 nécessite la mise à jour de ces attributs.

Dans les versions précédentes de Bootstrap, la fonctionnalité de réduction était initiée par l'attribut data-toggle="collapse" . Cependant, Bootstrap 5 nécessite l'utilisation de data-bs-toggle="collapse" à la place.

De même, l'attribut data-target, qui spécifie l'ID de l'élément à réduire ou à développer doit être mis à jour pour data-bs-target.

Code mis à jour :

<button>
Copier après la connexion

En plus des changements mentionnés ci-dessus, il est important de noter que Bootstrap 5 a introduit de nouvelles classes pour margins :

  • mr-auto, la classe auto de marge droite, est remplacée par me-auto.
  • ml -auto, la classe auto de la marge gauche, est remplacée par ms-auto.

En incorporant ces mises à jour, la fonctionnalité de réduction de la barre de navigation devrait fonctionner comme prévu dans Bootstrap 5.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal