我们如何解决 bootstrap 将导航栏固定在顶部，但 moves/floats 固定在左侧（滚动时）的问题

Question

我正在尝试让菜单栏在用户向上滚动时保持在顶部。它粘在顶部很好。但是，它向左浮动。

代码：http://www.bootply.com/y801SV4HAu

如何修复菜单，使其固定在顶部和中心（当前将左边距设置为自动以使其居中）？

Answer 1

当向下滚动时 position: fixed 应用于 header 时，margin: auto 不再影响它，因此它会移回侧面。您必须找到另一种方法来使 div 居中。可能有很多方法可以做到这一点；最简单的副手可能是将它放在 .container div.

中

Answer 2

<div class="container" style="padding:0">
  <div id="menu-header" class="affix">
      <div class="navbar navbar-inverse navbar-static-top">
          <div class="container"> 
            <span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
          </div>
      </div>
  </div>
</div>

以上是你想要它做的。 Cassie 在建议容器 div 时是正确的，但添加的样式 padding:0 符合您想要的外观。使其与页面标题对齐。

我们如何解决 bootstrap 将导航栏固定在顶部，但 moves/floats 固定在左侧（滚动时）的问题

How can we fix bootstrap affix issue which sticks navbar fine at the top, but moves/floats to left (upon scrolling)

twitter-bootstrap-3