El menú desplegable no funciona después de cambiar el tamaño

Question

Estoy comenzando con bootstrap e hice una pequeña plantilla html con solo un encabezado de menú (con elementos desplegables).

El problema es que después de cambiar el tamaño de la ventana para que sea lo suficientemente pequeña como para forzar el colapso del menú receptivo, uso el menú desplegable (navegar) mientras está colapsado, y luego de eso maximizo la ventana, el elemento del menú desplegable deja de funcionar (muestra un desplazamiento para ver el contenido). en lugar de desplegarse).

¿Código de muestra?Simplemente pruebe la "Plantilla de barra de navegación" desde bootstrap: http://getbootstrap.com/examples/navbar/

¿Existe alguna solución conocida para este problema?

Probado en Firefox y Chrome.

Answer 1

actualización

Agregar esto después de la CSS de su bootstrap:

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

- Actualización final

Sí, esta apariencia "extraña", la clase "en" tiene efecto después de volver a clasificar.

Podría eliminar la clase 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);
});   

Cambiar el tamaño del código de: Cambio dinámico del nombre de la clase basado en el tamaño de la ventana < / a>, mejores soluciones para hacer esto: ¿Cómo detectar puntos de interrupción sensibles de Twitter Bootstrap 3 usando JavaScript?

Tal vez también es posible restablecer la clase .in para el ancho de pantalla por encima del punto de interrupción con una consulta de medios.

Parece que es un error, consulte: https://github.com/twbs/ Bootstrap / Problemas / 11243

Answer 2

La otra respuesta no funcionó para mí, ya que la clase de colapso agregó una pantalla: ninguna;(Tal vez una versión diferente de Bootstrap).La solución que funcionó para mí es agregar a su CSS sensible:

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

Para mí, el problema ocurrió cuando abro y luego cierre el menú colapsado, seguido de un cambio de tamaño.Espero que esto ayude.

Answer 3

Forzar la altura automática en el elemento que colapsa (por encima del punto de ruptura) funcionó para mí.

Busque la identificación o clase en el botón de alternancia, por ejemplo. data-target=".navbar-ex1-collapse" y use min-width (su punto de ruptura):

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