javascript - 如何修复浏览器调整大小时 Bootstrap 导航栏固定顶部填充

Question

我有一个 .navbar.navbar-inverse.navbar-fixed-top 导航栏，它始终位于页面顶部。我给 body 填充了 70 px，效果很好。

问题是，如果我调整浏览器的大小，那么导航栏就不再美观整洁且高度固定。相反，它包裹了其中的所有元素，导航栏的高度变得超过 70 px，并覆盖了页面的部分内容。

为了解决这个问题，我尝试使用 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 方式，根据屏幕分辨率将导航栏折叠或展开为按钮。在我看来，上述方法稍微不太理想