브라우저에서 부트 스트랩 navbar 고정식 상단 패딩을 수정하는 방법

Question

페이지 상단에 항상 .navbar.navbar-inverse.navbar-fixed-top 탐색 표시 줄이 있습니다. 나는 body에 70 px의 패딩을주었습니다.

브라우저의 크기를 조정하면 nav-bar가 더 이상 좋지 않고 고정 된 높이로 정리되지 않습니다. 대신 모든 항목을 감싸고 탐색 막대의 높이는 70 픽셀 이상이되어 페이지의 일부를 덮습니다.

이 문제를 해결하려면, 나는 탐색 모음의 높이를 확인하고 몸에게 더 많은 패딩을 제공하기 위해 jQuery를 사용하여 시도 브라우저가 아니기 때문에, 나는 그러나,이 솔루션이 작동하지 않습니다

if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) { 
    $("html, body").css("padding-top", "150px"); 
} 

document.ready()에 넣고 크기가 줄어들면 다시로드되므로이 확인은 동적으로 이루어지지 않습니다. 어떻게 해결할 수 있습니까?

Answer 1

여기서 크기 조정 이벤트 리스너를 사용할 수 있습니다. 이런 식으로 뭔가 :

$(window).resize(function() { 
    if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) { 
    $("html, body").css("padding-top", "150px"); 
    } 
}); 

은 또한 당신은 또한 부트 스트랩의 길을 갈 및 붕괴 및 화면 해상도에 따라 버튼으로 Navbar를 확장 할 수있다. 위의 방법은 이상적인 IMO보다 약간 작습니다.