2016-12-30 4 views
0

Ich bin mit Bootstrap 3 in meiner Web-Anwendung und unter HTML erzeugt das Layout im Bild depicatedAlign Kontrollen in navbar Bootstrap

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

enter image description here

Jetzt würde ich gerne haben Textfeld und Suchschaltfläche vertikal ausgerichtet Mitte, jede Idee, was geändert werden muss.

+0

fügen Sie eine ** class = "align-middle" ** in Ihrem Formular hinzu, sonst können Sie benutzerdefinierte Inline-CSS schreiben ** vertical-align: middle **, lassen Sie mich wissen, ob eine davon funktioniert. –

Antwort

0

können Sie versuchen, die .navbar-Form-Klasse zusammen mit der .form-Inline-Klasse mit:

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

Danach, vielleicht können Sie den <br> Tag nach der Form schließenden Tag loszuwerden.

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

Sie können mit padding-top und padding-bottom versuchen: Auch, wenn Sie das Suchfeld und Schaltfläche auf der rechten Ecke ausrichten möchten, können Sie .navbar-Recht als auch nutzen. Check out working solution here jsbin

Hoffe, das wird Ihnen helfen.