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

祝您好运:)的