Bootstrap 3 - 按钮与导航栏中的输入无法正确对齐？

Question

我试图在bootstrap 3中的响应式导航栏中设置一个简单的搜索栏。这就是我的标记的样子：

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid" id="navbar-container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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="/">Site</a>
         <form class="navbar-form navbar-left" role="search" action="/search/">
        <div class="form-group">
          <input type="text" class="form-control" id="searchbar"   name="q">
        </div>
        <button type="submit" class="button" id="search-button"><i class="fa fa-search"></i></button>
      </form>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">    
        <li><a href="/thing1">Thing1</a></li>
        <li><a href="/thing2">thing2</a></li>
      </ul>        
      <ul class="nav navbar-nav navbar-right">
        <li><a href="">Dashboard</a></li>
        <li><a href="">Log out</a></li>
        {% else %}
        <li><a href="/login">Log in/register</a></li>
        {% endif %}
        <div class="visible-xs visible-sm">        
    </div><!-- /.navbar-collapse -->  
</nav> 

CSS（LESS）：

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
     border-color: transparent;
     box-shadow: none;
 }
 .navbar.navbar-default {
     background-color: @quaternary;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
     .navbar-brand {
         color: @base;
     }
     li a {
         color:@base;
         text-decoration: none;
     }

      li a:hover{
        color: @highlight;
      }
     #searchbar {
         width: 600px;
         border: 0;
         outline: 0;
         outline-style: none;
         outline-width: 0;
         -webkit-appearance: none;
         -webkit-border-radius:3px;
         border-radius:3px;

     }
     #search-button {
         height: 34px;
         width: 60px;
         -webkit-appearance: none;
         -webkit-border-radius:3px;
         border-radius:3px;
         background:@highlight;
         color:#FFFFFF;
         font-size: 1.2em;
         border:0;
     }

出于某种原因，即使我指定两者的高度和边框相同，按钮最终也位于搜索栏的上方。  任何解决方案让他们完美对齐？我尝试使用输入组，但这完全弄乱了我的导航栏，当我希望它们全部内联时，将所有链接推到搜索栏下方。谢谢。