ブートストラップスクロールと固定ナビゲーションバー - コンテナクラスのバグ？

Question

このようなページをスクロールするときにnavbarを修正したいのですが、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

これは、それを解決する必要があります は、NAVを保持する容器に接辞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>