Как исправить Bootstrap navbar fixed top padding при изменении браузера

Question

У меня есть панель навигации .navbar.navbar-inverse.navbar-fixed-top, которая всегда остается в верхней части страницы. Я дал body прокладку 70 px, и это хорошо работает с ней.

Проблема в том, что если я изменяю размер браузера, тогда навигационная панель перестает быть красивой и аккуратной с фиксированной высотой. Вместо этого он обертывает все элементы в нем, высота панели навигации становится более 70 пикселей и охватывает части страницы.

Чтобы это исправить, я попытался с помощью JQuery, чтобы проверить высоту панели навигации и дать организму больше дополнения, я положил это в document.ready()

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

Однако это решение не работает, потому что браузер не перезагружается, когда его размер сжимается, поэтому эта проверка не происходит динамически. Итак, как я могу это исправить?

Answer 1

Здесь вы можете использовать прослушиватель событий изменения размера окна. Что-то вроде этого:

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

Кроме того, вы можете также пойти по пути Bootstrap и свернуть и развернуть Navbar в кнопку, в зависимости от разрешения экрана. Вышеуказанный подход немного меньше идеала IMO