Le menu déroulant ne fonctionne pas après le redimensionnement

Question

Je commence par bootstrap et j'ai créé un petit modèle HTML avec juste un en-tête de menu (avec des éléments déroulants).

Le problème est qu'après avoir redimensionné la fenêtre pour qu'elle soit suffisamment petite pour forcer le réduction du menu réactif, utiliser la liste déroulante (navigation) pendant la réduction, et après avoir agrandi la fenêtre, l'élément du menu déroulant cesse de fonctionner (affiche un défilement pour afficher le contenu au lieu de dérouler).

Exemple de code ?Essayez simplement le "Modèle Navbar" de bootstrap : http://getbootstrap.com/examples/navbar/

Existe-t-il une solution connue à ce problème ?

Testé sous Firefox et Chrome.

Answer 1

mise à jour

Ajoutez ceci après le CSS de votre bootstrap:

@media (min-width: 768px) 
{   
    .navbar-collapse.in{ overflow-y:visible;}
}

- Mise à jour finale

Oui, cet aspect "étrange" la classe "in" a eu effet après la réinimensionnement encore.

Vous pouvez supprimer la classe avec jQuery:

$(document).ready(function() 
{
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {

        if ($window.width() >= 768) {
            $('.navbar-collapse').removeClass('in').addClass('collapse');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
        $(window).resize(checkWidth);
});   

redimensionner le code de: modification de manière dynamique Nom de la classe basée sur la taille de la fenêtre < / a>, de meilleures solutions pour faire cela: Comment détecter les points d'arrêt réactifs de Twitter Bootstrap 3 à l'aide de JavaScript?

peut-être également de réinitialiser la classe .in pour ScreenWidth au-dessus du point d'arrêt avec une requête multimédia.

Il semble être un bug, voir: https://github.com/twbs/ Bootstrap / Problèmes / 11243

Answer 2

L'autre réponse n'a pas fonctionné pour moi, car la classe d'effondrement a ajouté un affichage: aucun;(Peut-être une version différente de Bootstrap).La solution qui a fonctionné pour moi est d'ajouter à votre CSS réactif:

@media screen and (min-width: 768px){
    .collapse{ display:block;}
}

Pour moi, le problème est survenu lorsque j'ouvre puis fermez le menu effondré, suivi d'un redimensionnement.J'espère que cela aide.

Answer 3

Forcer la hauteur automatique sur l'élément qui s'effondre (au-dessus du point de rupture) a fonctionné pour moi.

Recherchez l'identifiant ou la classe sur le bouton bascule, par exemple. data-target=".navbar-ex1-collapse" et utilisez min-width (votre point de rupture) :

@media screen and (min-width: 768px){
    .navbar-ex1-collapse { height:auto !important;}
}