Выпадающее меню не работает после изменения размера

Question

Я начинаю с бутстрапа и создаю небольшой шаблон html с только заголовком меню (с выпадающим списком).

Проблема заключается в том, что после того, как я изменил размер окна, чтобы он был достаточно мал, чтобы заставить реагировать на сворачивание меню, используйте раскрывающийся список (перемещаться), а затем сверните его, и после этого я максимизирую окно, выпадающий пункт меню перестает работать (показывает прокрутите, чтобы просмотреть содержимое, а не раскрывать его).

Образец кода? Просто попробуйте «шаблон Navbar» из бутстрапа: http://getbootstrap.com/examples/navbar/

Есть ли известное решение этой проблемы?

Протестировано в Firefox и Chrome.

Answer 1

Update

добавить это после того, как CSS вашего Bootstrap в:

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

--end обновить

Да, это выглядит "странно" "в" класса имеют эффект после повторного все еще.

Вы можете удалить класс с 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); 
}); 

Resize от: Dynamically changing class name based on window size, лучшие решения, чтобы сделать это: How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

Может быть, это также можно сбросить класс .in для screenwidth над точкой останова с запросом на медиа.

Это кажется ошибка, см: https://github.com/twbs/bootstrap/issues/11243

Answer 2

Другой ответ не работает для меня, как класс Распад добавил дисплей: нет; (возможно, другая версия Bootstrap). Решение, которое работало для меня является добавление к вашему отзывчивому CSS:

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

Для меня проблема произошла, когда я открываю, а затем закройте свернутое меню, а затем изменениями размера. Надеюсь это поможет.

Answer 3

Принудительная автоматическая высота на сворачивающемся элементе (выше точки останова) работала для меня.

Найдите идентификатор или класс на кнопке переключения, например. data-target=".navbar-ex1-collapse" и использовать минимальную ширину (ваша точка разрыва):

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