html Bootstrap vertikal ausrichten

Question

Ich möchte den Text auf der linken Seite mit den drei Tasten auf der rechten Seite meiner folgenden Panel-Position ausrichten:

hier ist mein Code:

<div class="col-lg-9 col-md-9 col-sm-9"> 
       <h4 class="panel-title"> 
       <!--<a data-toggle="collapse" data-target="#collapse1">--> 
       <h2>Pf <strong>{{pf.pfid}}</strong></h2> 
       <!-- </a>--> 
       </h4> 
       </div> 
       <div class="col-lg-1 col-md-1 col-sm-1"> 
       <button class="btn btn-danger btn-circle-lg" (click)="AddPf()" disabled><span class="glyphicon glyphicon-plus"></span></button> 
       </div> 
       <div class="col-lg-1 col-md-1 col-sm-1"> 
       <button class="btn btn-warning btn-circle-lg" (click)="showAccForm()"><span class="glyphicon glyphicon-plus"></span></button> 
       </div> 
       <div class="col-lg-1 col-md-1 col-sm-1" *ngIf="authorization.profileid==1"> 
       <button class="btn btn-info btn-circle-lg" (click)="showAssForm()"><span class="glyphicon glyphicon-plus"></span></button> 
      </div> 

Irgendeine Idee?

Answer 1

Sie könnten quick floats verwenden, um ein Element nach links oder rechts zu schweben. Um die Textzeile an der mittleren Linie der Schaltflächengruppe auszurichten, verwenden Sie den Wert line-height, der der Höhe der Schaltfläche entspricht.

.panel-title { 
 
    line-height: 36px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <h2 class="panel-title pull-left">Pf <strong>3788</strong></h2> 
 
    <div class="pull-right"> 
 
     <button class="btn btn-danger btn-circle-lg" disabled><span class="glyphicon glyphicon-plus"></span></button> 
 
     <button class="btn btn-warning btn-circle-lg"><span class="glyphicon glyphicon-plus"></span></button> 
 
     <button class="btn btn-info btn-circle-lg"><span class="glyphicon glyphicon-plus"></span></button> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
    <div class="panel-body"> 
 
    Panel content 
 
    </div> 
 
</div>

Auch Sie könnten margin-top Eigenschaftswert finden die notwendige vertikale Anordnung eines Elements einzustellen.