如何将折叠引导程序导航栏中的链接与右侧的搜索栏对齐？

Question

我现在正在尝试自定义我的tumblr主题，我希望有一个导航栏，中间有一个图标，右边有一个搜索栏，当屏幕变小时，导航栏的项目应显示在下拉菜单。到目前为止，我已经看到了中间，左侧和右侧或左右两侧按钮的示例。但我找不到我想要的导航栏。所以我试着调整一些样本，但是我将问题与中间的按钮对齐。要么他们不想与中间对齐，要么他们被中等但由于搜索栏而被推到左边。有人可以帮我吗？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
 .navbar-nav {
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
.col-md-offset-4 {
  background-color: black;
}

<nav class="navbar navbar-default" role="navigation">

  <!-- 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>

  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="row aligned-row">

    <div class="col-sm-4 col-md-4 col-sm-offset-4 col-md-offset-4">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Link</a>
          </li>
          <li><a href="#">Link</a>
          </li>
          <li><a href="#">Link</a>
          </li>
          <li><a href="#">Link</a>
          </li>
          <li><a href="#">Link</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="col-sm-4 col-md-4">
      <form class="navbar-form pull-right" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="q">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
            </button>
          </div>
        </div>
      </form>
    </div>

  </div>
  <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>