對齊控制

Question

我使用引導3在我的web應用程序，和下面的HTML生成的圖像depicated佈局

<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

您可以嘗試使用.navbar形式類的.FORM內聯類沿：

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

在此之後，也許你可以在表單結束標記之後擺脫<br>標籤。 另外，如果你要對齊的搜索框和按鈕右側角球，您可以使用.navbar右以及：

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

Answer 2

您可以padding-top和padding-bottom嘗試。退房工作解決方案here jsbin

希望這會幫助你。