Twitter Bootstrap 3 Navbar collapseバグ

Question

こんにちは、私は崩壊navbarで少し問題がありました。折りたたみボタンをクリックしたときにブラウザの右側に配置されませんか？

<div class="navbar navbar-inverse navbar-static-top"> 

<div class="container"> 

    <a href="#" class="navbar-brand">My Site</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><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contacts</a></li> 


      <li class="dropdown"> 

      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a> 

      <ul class="dropdown-menu"> 
      <li><a href="#">Logout</a></li> 
      <li><a href="#">Logout</a></li> 
      <li><a href="#">Logout</a></li>     

      </ul> 


      </li> 
     </ul> 
    </div> 

</div> 

Sample output

Answer 1

あなたは.navbar-headerで崩壊ボタンとブランドのリンクをラップする必要があります。

<div class="navbar navbar-inverse navbar-static-top"> 
<div class="container"> 
    <div class="navbar-header"> 
     <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> 
     <a href="#" class="navbar-brand">My Site</a> 
    </div> 

    <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contacts</a></li> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Logout</a></li> 
        <li><a href="#">Logout</a></li> 
        <li><a href="#">Logout</a></li>     
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

あなたはnavbar-headerを使用する必要があり、その後、あなたは上のbrandとハンバーガーのアイコンを持っています同じレベル、およびその行の下のメニューの内容全体を表示します。例を生きるために

<div class="navbar-header"> 
    <a href="#" class="navbar-brand">My Site</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> 

リンク：http://www.bootply.com/jowa705iHl

ここでは、すべての必要なドキュメントを見つけることができますので、基本的にあなたのコードは、そのようになるはずですhttp://getbootstrap.com/components/#navbar

運のベスト:)