トグル時に、ブートストラップのnavbarが正しく整列しない

Question

<ul>の要素が画像上に正しく表示されない（ホームアクティブリンクが残り、トグルリンクの残りの部分がブランドである必要がある）のはなぜですか？

コード：

<div class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
    <a href="" class="navbar-brand">Sample Brand</a> 
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Social Media</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Answer 1

私はtuturialを表示した後bootsrapのCSSに問題があります。 ボタンに浮動小数点：right要素があり、クリアする必要があります。

https://jsfiddle.net/05aah0tb/