Bootstrap Fortschrittsbalken Etikett falsch ausgerichtet

Question

Ich benutze 4 Bootsrap Fortschrittsbalken und Fortschritt Label. Aber jeder Fortschrittsbalken ist falsch ausgerichtet. Die Fortschrittsleiste passt nicht zum obigen Fortschrittsbalken. Unten ist der Screenshot.

Unten ist der Code i verwendet. Ich möchte den obigen Fortschrittsbalken an den gleichen Ort wie den anderen ausrichten. Hat jemand eine Lösung dieses Problem

<style> 
.progress {height: 25px;} 
.progress .sr-only { position: relative; } 
.progress-bar { line-height: 25px; } 
.progress-label {float: left;margin-right: em;} 
</style> 

<!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog" style="margin-top: 76px"> 
    <div class="modal-dialog modal-lg"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 

     <div class="progress"> 
      <label class="progress-label"style="font-size: large;"> Total memory:</label> 
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
     40% Complete (success) 
      </div> 
     </div> 
     <div class="progress"> 
      <label class="progress-label"style="font-size: large;"> Used memory:</label> 
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
     40% Complete (success) 
      </div> 
     </div> 
     <div class="progress"> 
      <label class="progress-label"style="font-size: large;"> Free memory:</label> 
      <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
     40% Complete (success) 
      </div> 
     </div> 
     <div class="progress"> 
      <label class="progress-label"style="font-size: large;"> Memory Usage:</label> 
      <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
     40% Complete (success) 
      </div> 
     </div> 
    <div class="progress"> 
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 
     50% Complete (info) 
    </div> 
    </div> 
    <div class="progress"> 
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 
     60% Complete (warning) 
    </div> 
    </div> 
    <div class="progress"> 
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
     70% Complete (danger) 
    </div> 
    </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

Answer 1

<div class="col-md-4"> 
**//Label Goest Here Make fixes area for all labels and rest for progress bar** 
    </div> 



    <div class="progress"> 
     <div class="col-md-4"> 
     <label class="progress-label"style="font-size: large;"> Total memory:</label> 
     </div> 

<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
40% Complete (success) 
    </div> 
     </div> 

Answer 2

Sie haben zwei Möglichkeiten

1. verwenden das Standard-Bootstrap-Grid-System zu lösen. Fügen Sie die Klassen .col-xs-3 und .col-xs-9 den Klassen .progress-label und .progress-bar hinzu.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<style> 
 
    .progress { 
 
    height: 25px; 
 
    } 
 
    
 
    .progress .sr-only { 
 
    position: relative; 
 
    } 
 
    
 
    .progress-bar { 
 
    line-height: 25px; 
 
    } 
 
    
 
    .progress-label { 
 
    float: left; 
 
    margin-right: em; 
 
    } 
 
</style> 
 

 
<div class="cntainer-fluid"> 
 
    <div class="progress"> 
 
    <label class="progress-label col-xs-3" style="font-size: large;"> Total memory:</label> 
 
    <div class="progress-bar progress-bar-striped active col-xs-9" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
 
     40% Complete (success) 
 
    </div> 
 
    </div> 
 
    <div class="progress"> 
 
    <label class="progress-label col-xs-3" style="font-size: large;"> Used memory:</label> 
 
    <div class="progress-bar progress-bar-striped active col-xs-9" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 
 
     50% Complete (success) 
 
    </div> 
 
    </div> 
 
    <div class="progress"> 
 
    <label class="progress-label col-xs-3" style="font-size: large;"> Free memory:</label> 
 
    <div class="progress-bar progress-bar-info progress-bar-striped active col-xs-9" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 
 
     60% Complete (success) 
 
    </div> 
 
    </div> 
 
    <div class="progress"> 
 
    <label class="progress-label col-xs-3" style="font-size: large;"> Memory Usage:</label> 
 
    <div class="progress-bar progress-bar-info progress-bar-striped active col-xs-9" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
 
     70% Complete (success) 
 
    </div> 
 
    </div> 
 
    <div class="progress"> 
 
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 
 
     50% Complete (info) 
 
    </div> 
 
    </div> 
 
    <div class="progress"> 
 
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 
 
     60% Complete (warning) 
 
    </div> 
 
    </div> 
 
    <div class="progress"> 
 
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
 
     70% Complete (danger) 
 
    </div> 
 
    </div> 
 
</div>

2. das Geben .progress-label eine Mindestbreite

   .progress-label { min-width: 150px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<style> 
 
    .progress { 
 
    height: 25px; 
 
    } 
 
    
 
    .progress-label { 
 
    min-width: 150px; 
 
    } 
 
    
 
    .progress .sr-only { 
 
    position: relative; 
 
    } 
 
    
 
    .progress-bar { 
 
    line-height: 25px; 
 
    } 
 
    
 
    .progress-label { 
 
    float: left; 
 
    margin-right: em; 
 
    } 
 
</style> 
 

 

 
<div class="progress"> 
 
    <label class="progress-label" style="font-size: large;"> Total memory:</label> 
 
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
 
    40% Complete (success) 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <label class="progress-label" style="font-size: large;"> Used memory:</label> 
 
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 
 
    50% Complete (success) 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <label class="progress-label" style="font-size: large;"> Free memory:</label> 
 
    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 
 
    60% Complete (success) 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <label class="progress-label" style="font-size: large;"> Memory Usage:</label> 
 
    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
 
    70% Complete (success) 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 
 
    50% Complete (info) 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 
 
    60% Complete (warning) 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
 
    70% Complete (danger) 
 
    </div> 
 
</div>