empêchant l'animation d'effondrement de bootstrap au-dessus de md breakpoint

Question

J'ai créé un site Web en utilisant Bootstrap. Mon site dispose d'une barre de navigation, et les options de menu «À propos», «Mes projets» et «Contactez-moi» se cachent derrière un menu extensible lorsque la largeur de la page Web est inférieure au point d'arrêt md. J'ai ajouté data-toggle = "collapse" aux options du menu de sorte que lorsque l'utilisateur clique sur l'une des options du menu, le menu s'effondre.

Le problème que je rencontre est que les options de menu mentionnées ci-dessus passent par l'animation de réduction, même lorsque la largeur de la page est au-dessus du point d'arrêt md. Un moyen que je pense que ce comportement pourrait être manipulé est en ajoutant/supprimant l'attribut data-toggle = "collapse" basé sur la taille actuelle de la page grâce à l'utilisation de $ (window) .resize() et $ (window) .load() écouteurs d'événement pour le chargement initial de la page.

Peut-il y avoir une meilleure solution?

Lien vers le site: http://benws-projectportfolio.herokuapp.com/

HTML:

<nav class="navbar navbar-inverse fixed-top navbar-toggleable-md navbar-light bg-faded" style="background-color:#3A4A4D;"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Ben Shippey</a> 
    <div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent" style="background-color:#3A4A4D;"> 
    <ul class="navbar-nav "> 
     <li class="nav-item"> 
     <a id="aboutButton" class="nav-link active" href="#navbarSupportedContent" data-toggle="collapse">About</a> 
     </li> 
     <li class="nav-item"> 
     <a id="projectButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">My Projects</a> 
     </li> 
     <li class="nav-item"> 
     <a id="contactButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">Contact Me</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

Answer 1

Je l'ai testé cette réponse de @ZimSystem avec succès: https://stackoverflow.com/a/28684484/6252145

Ajouter un attribut cible de données à vos liens de nav. Dans votre cas, cependant, il serait:

data-target=".navbar-collapse.show" 

au lieu de

data-target=".navbar-collapse.in" 

comme dans la réponse de @ ZimSystem