Navbar按钮只能在较小的屏幕上右移

Question

我正在尝试设置导航栏，以便左侧有一个品牌图标（当前只使用占位符文本），导航栏右侧有两个按钮。 Here is the JSFiddle showing this。

我遇到的问题是，这在小屏幕上按预期工作，但是当我的浏览器是全尺寸的时候，一切似乎都向左拉。有没有我失踪的课程？

<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Business Name</a> 
     <form class="pull-right"> 
     <button type="button" class="btn btn-default navbar-btn btn-xs" data-toggle="modal" data-target="#signInModal"> 
      Sign In 
     </button> 
     <button type="button" class="btn btn-default navbar-btn btn-xs" data-toggle="modal" data-target="#signUpModal"> 
      Sign Up 
     </button> 
     </form> 
    </div> 
    </div> 
</nav> 

Answer 1

一些Bootstrap希望存在的div缺少以及移动汉堡菜单。尝试更多的东西一样：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
      </button> <a class="navbar-brand" href="#">Brand</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
        <button type="button" class="btn btn-default navbar-btn">Sign in</button> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </div> 
      </form> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

小提琴： http://jsfiddle.net/njkcaqvu/