bootstrap 滚动和固定导航栏 - 容器上的错误 class？

Question

当你像这样向上滚动页面时，我想修复导航栏 example。

用.container-fluid没问题，用.container就不行了。

CSS:

  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }

HTML:

<div class="container" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<div class="container">
    <nav class="navbar navbar-default" data-spy="affix" data-offset-top="197">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Basic Topnav</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </nav>
</div>


<div class="container" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

结果：

有什么解决办法吗？

Answer 1

这应该可以解决问题：将词缀 data-spy 添加到包含 nav

的容器中

HTML:

<div class="container" data-spy="affix" data-offset-top="197">
 <nav class="navbar navbar-default">
   <ul class="nav navbar-nav pull-right">
     <li class="active"><a href="#">Basic Topnav</a></li>
     <li><a href="#">Page 1</a></li>
     <li><a href="#">Page 2</a></li>
     <li><a href="#">Page 3</a></li>
   </ul>
 </nav>
</div>

bootstrap 滚动和固定导航栏 - 容器上的错误 class？

bootstrap scroll and fixed navbar - buggy on container class?

css

twitter-bootstrap

affix