Question

我有一个.navbar.navbar-inverse.navbar-fixed-top导航栏，始终位于页面顶部。我给了body一个70像素的填充，这很好用。

问题是如果我调整浏览器的大小，那么导航栏不再漂亮而且整齐，高度固定。相反，它包装了其中的所有项目，导航栏的高度变得超过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

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

1 个答案: