Question

我在早期开发中有一个以引导程序为主题的网站，并且在粘性导航栏中遇到了奇怪的行为。在Chrome中途向下滚动（最初在Firefox中滚动）后，导航栏缩小到其宽度的一半。任何人都可以想到这个原因吗？

看到此行为的演示

谢谢！

Answer 1

看起来你正在使用词缀和scrollspy。我认为你不需要同时使用它们，这可能是导致问题的原因。你最好只使用scrollspy。

为此，请将您的正文标记更改为：

<body data-spy="scroll" data-target=".navbar" data-offset-top="50">

然后将导航栏div更改为：

<div class="navbar navbar-inverse navbar-fixed-top">

这会在让scrollspy工作时停止调整大小问题。但是，如果您希望导航栏的宽度小于全宽，那么最好不要使用navbar-fixed-top而是自己将导航栏固定到顶部，执行以下操作：

@media (min-width: 481px) {
  .navbar {
    position: fixed;
    z-index: 1030;
    width: 80%;
    margin: 20px auto;
  }

}

Answer 2

在您的css中尝试使用nav-wrapper id

HTML 的

<nav id="nav-wrapper" class="navbar-default" role="navigation" data-spy="affix" data-offset-top="60">

CSS

#nav-wrapper.affix {
top: 0 !important;
width: 100% !important;
}

它应该修复你的调整大小问题，问候！