Il menu a discesa non funziona dopo il ridimensionamento

Question

Sto iniziando con Bootstrap e realizzo un piccolo modello HTML con solo un'intestazione di menu (con elementi a discesa).

Il problema è che dopo aver ridimensionato la finestra per essere abbastanza piccola da forzare il collasso del menu reattivo, utilizzare il menu a discesa (navigare) mentre è crollato, e dopo il massimo la finestra, la voce di menu a discesa si arresta di funzionare (mostra un rotoloper visualizzare il contenuto invece di cadere).

Codice di esempio?Basta provare il "Navbar Template" da Bootstrap: http://getboollowstrap.com/examples/navbar/

C'è una correzione nota per questo problema?

Testato in Firefox e Chrome.

Answer 1

Aggiornamento

Aggiungi questo dopo il CSS del tuo Bootstrap:

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

.

- Aggiornamento finale

Sì, questo aspetto "strano" la classe "in" ha effetto dopo il ridimensionamento ancora.

Potresti rimuovere la classe con 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);
});   

.

Ridimensiona codice da: Modifica dinamica Nome classe in base alla dimensione della finestra < / A>, soluzioni migliori per fare ciò: Come rilevare i punti di interruzione reattiva di Twitter Bootstrap 3 utilizzando JavaScript?

Forse è anche possibile ripristinare la classe .in per Scendiawidth sopra il punto di interruzione con una query del supporto.

Sembra essere un bug, vedere: https://github.com/twbs/ Bootstrap / problemi / 11243

Answer 2

L'altra risposta non ha funzionato per me, come la classe di crollasso ha aggiunto un display: nessuno;(Forse una versione diversa di bootstrap).La soluzione che ha funzionato per me sta aggiungendo al tuo CSS reattivo:

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

.

Per me si è verificato il problema quando apro e quindi chiudo il menu collassato, seguito da una ridimensionata.Spero che questo aiuti.

Answer 3

Forzare l'altezza automatica sull'elemento collasso (sopra il punto di rottura) ha funzionato per me.

Trova l'ID o la classe sul pulsante Attiva / disattivadata-target=".navbar-ex1-collapse" e utilizzare Min-Width (il tuo punto di rottura):

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

.