드롭 다운 메뉴는 크기 조정 후에 작동하지 않습니다

StackOverflow https://stackoverflow.com//questions/20010756

문제

BootStrap에서 시작하여 메뉴 헤더 (드롭 다운 항목 포함)만으로 약간의 HTML 템플릿을 만들었습니다.

응답자가 축소 된 상태에서 드롭 다운 (탐색)을 사용하여 윈도우를 크기를 조정 한 후에는 축소 된 상태에서 윈도우를 최대화 한 후 드롭 다운 메뉴 항목이 작동하지 않습니다 (스크롤드롭 다운 대신 콘텐츠를 보려면).

샘플 코드?Bootstrap에서 "Navbar Template"을 사용해보십시오. http://getbootstrap.com/examples/navbar/

이 문제에 대한 알려진 수정 사항이 있습니까?

Firefox와 Chrome에서 테스트되었습니다.

도움이 되었습니까?

해결책

업데이트

부트 스트랩의 CSS 후에 이것을 추가하십시오 : 

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

- 엔드 업데이트

예, "이상한"이 보이는 "이상한"클래스는 여전히 다시 크기 조정 후 효과가 있습니다.

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);
});
.

코드의 크기를 조정 : 창 크기를 기반으로 클래스 이름을 동적으로 변경합니다 < / A>, 더 나은 솔루션이 작업을 수행하려면 다음을 수행하십시오. Twitter BootStrap 3의 반응 형 중단 점을 탐지하는 방법 자바 스크립트를 사용하여

미디어 쿼리가있는 중단 점 위의 ScreenWidth 위의 .in 클래스를 재설정 할 수도 있습니다.

버그 인 것 같습니다 : https://github.com/twbs/ 부트 스트랩 / 이슈 / 11243

다른 팁

collapse 클래스가 디스플레이가 추가되었으므로 다른 답변이 작동하지 않았습니다. 없음;(아마도 다른 버전의 부트 스트랩).나를 위해 일한 솔루션은 반응식 CSS에 추가됩니다. 

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

나를 열고 축소 된 메뉴를 닫은 다음 크기 조정을 누른 다음 문제가 발생했습니다.이것이 도움이되기를 바랍니다.

붕괴 요소의 자동 높이 강제 (위의 파손 지점 위)가 나를 위해 작동했습니다.

토글 버튼의 ID 또는 클래스를 찾습니다.data-target=".navbar-ex1-collapse" 및 min-width (Breaking Point) : 

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top