부트 스트랩 스크롤 및 고정 된 navbar - 컨테이너 클래스의 버그?

Question

example처럼 페이지를 스크롤 할 때 navbar를 수정하고 싶습니다.

.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>