Twitter Bootstrap 3導航欄崩潰錯誤

Question

美好的一天傢伙，我在崩潰導航欄中遇到了一些麻煩。當我點擊摺疊按鈕時，它不會與瀏覽器的右側對齊？

<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

祝您好運:)的