引导滚动和固定导航栏 - 容器类错误？

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添加到持有导航

的容器中

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>