对齐导航栏Bootstrap中的控件

Question

我在我的网络应用程序中使用Bootstrap 3，而在html下方产生图像中描绘的布局

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" [routerLink]="['']" routerLinkActive="active" >Books & NoteBooks</a>
    </div>
    <ul class="nav navbar-nav">
      <li ><a [routerLink]="['']">Home</a></li>      

      <li *ngFor="let category of categories">
        <a [routerLink]="['./acategories' ,category.name , 'products']" routerLinkActive="active">{{category.name}}</a>
      </li>
      <li><a [routerLink]="['./acart']" routerLinkActive="active">
      <span *ngIf="cartCount > 0" class="badge">{{cartCount}}</span>
      <span class="glyphicon glyphicon-shopping-cart">&nbsp;Bag</span></a></li>
      <li><a [routerLink]="['./aorders']" routerLinkActive="active">Order Details</a></li>
      <li><a [routerLink]="['./about']" routerLinkActive="active">About</a></li>
      <li>&nbsp;>&nbsp;>&nbsp;&nbsp;&nbsp;&nbsp;>&nbsp;</li>
</ul>  

    <form class="form-inline" (ngSubmit)="onSearch()">
        <div class="form-group">
          <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
          <div class="input-group">    
            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Item Name">      
          </div>
        </div>
      <input type="submit" class="btn btn-primary" value="Search"/>
      </form><br>

  </div>

现在我想将文本框和搜索按钮垂直对齐中间，任何想法都需要修改。

Answer 1

您可以尝试使用padding-top和padding-bottom。查看工作解决方案here jsbin

希望这会对你有所帮助。

Answer 2

您可以尝试将.navbar-form类与.form-inline类一起使用：

<form class="form-inline navbar-form" role="form" (ngSubmit)="onSearch()">
        <div class="form-group">...

在此之后，也许您可​​以在表单结束标记之后删除<br>标记。 此外，如果您想将搜索框和按钮对齐到右上角，您也可以使用.navbar-right：

<form class="form-inline navbar-form navbar-right" role="form" (ngSubmit)="onSearch()">
        <div class="form-group">...