O menu suspenso não funciona após o redimensionamento

Question

Estou começando com o bootstrap e criei um pequeno modelo html com apenas um cabeçalho de menu (com itens suspensos).

O problema é que depois de redimensionar a janela para ser pequena o suficiente para forçar o colapso do menu responsivo, use o menu suspenso (navegar) enquanto estiver recolhido e, depois disso, maximize a janela, o item do menu suspenso para de funcionar (mostra uma rolagem para visualizar o conteúdo em vez de cair).

Código de amostra?Experimente o "Modelo da barra de navegação" do bootstrap: http://getbootstrap.com/examples/navbar/

Existe alguma solução conhecida para este problema?

Testado no Firefox e Chrome.

Answer 1

Atualizar

adicione isto após o CSS do seu Bootstrap:

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

--end atualização

Sim, esse aspecto "estranho" da classe "in" ainda tem efeito após o redimensionamento.

Você poderia remover a classe com 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);
});   

Redimensionar código de: Alterando dinamicamente o nome da classe com base no tamanho da janela, melhores soluções para fazer isso: Como detectar pontos de interrupção responsivos do Twitter Bootstrap 3 usando JavaScript?

Talvez também seja possível redefinir a classe .in para largura de tela acima do ponto de interrupção com uma consulta de mídia.

Parece ser um bug, veja: https://github.com/twbs/bootstrap/issues/11243

Answer 2

A outra resposta não funcionou para mim, pois a classe de colapso adicionou display:none;(talvez uma versão diferente do Bootstrap).A solução que funcionou para mim foi adicionar ao seu CSS responsivo:

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

Para mim, o problema ocorreu quando abro e fecho o menu recolhido, seguido de um redimensionamento.Espero que isto ajude.

Answer 3

Forçar a altura automática no elemento em colapso (acima do ponto de ruptura) funcionou para mim.

Encontre o id ou classe no botão de alternância, por exemplo. data-target=".navbar-ex1-collapse" e use min-width (seu ponto de ruptura):

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