부트 스트랩 3의 캔버스 벗어난 모바일 메뉴 관련 문제

Question

부트 랩 3에서 탐색을 위해 offcanvas를 사용하고 있는데, 이는 데스크탑 브라우저에서 완벽하게 작동하지만 윈도우의 너비가 작아 질 때 iOS 장치에서는 탐색의 offcanvas 부분 메뉴 버튼을 클릭하면 표시되지 않습니다. 예상했던대로 -80 % 들여 쓰기 만하면됩니다. 이는 Safari와 iOS 용 Chrome 모두에서 마찬가지입니다.

브라우저 및 Android 기기에서 작동하지만, iOS의 Safari 및 Chrome (아마도 모든 브라우저)에는 사용할 수 없습니다. CSS로 광범위하게 시도해 보았습니다. 여기에 나열하려고 시도 할 수있는 것보다 많은 변경이있었습니다. 의심의 여지없이 사소한 문제입니다.

Answer 1

나는 지금 당장 실종 된 것을 지적 할 수는 없지만, 나는 지난 며칠 동안 내가하고있는 사이트에서이 일을했다. 내 끈적한 헤더 때문에 javascript를 사용하여 .navbar-collapse를 작은 화면의 본문으로 옮깁니다. 내 CSS는 다음과 같습니다

.navbar-collapse { 
    max-height: none; 
    height: 100% !important; 
    z-index: 1000; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 70%; 
    max-width: 400px; 
    padding-top: @grid-padding*2; 
    -moz-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
    -o-transform: translateX(-100%); 
    -webkit-transform: translateX(-100%); 
    transform: translateX(-100%); 
    .transition; 
    overflow: scroll; 
} 



.navbar-collapse.in { 
    -moz-transform: translateX(0); 
    -ms-transform: translateX(0); 
    -o-transform: translateX(0); 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 

그리고 내 JS를,이

if (windowWidth > 767) { 
    if ($("#MainNav-collapse").parent().is("body")) { 
     $("#MainNav-collapse").appendTo("#MainNavBar"); 
    } 
} 
else { 
    $("#MainNav-collapse").appendTo("body"); 
}