Bootstrap進度條標籤錯位

我正在使用4個bootsrap progess條和progess標籤。但是每個進度條都沒有對齊。進度條與上述進度條不匹配。以下是截圖。Bootstrap進度條標籤錯位

下面是我使用的代碼。我想將上面的進度條對齊到另一個地方。任何人有任何解決方案來解決這個問題

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

來源

2017-03-01 Jeeva

排序您的問題設置寬度的標籤。另外，你在css的'margin-right：em;'行中缺少單元。 – Morpheus

@Jeeva你的意思是* progess bar不匹配*。你是在談論進度條或對齊或標籤文本的寬度 –

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

來源

2017-03-01 09:42:32

你有兩個選擇

使用默認的引導電網系統。將.col-xs-3和.col-xs-9類分別添加到.progress-label和.progress-bar類。

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

給所述.progress-label的最小寬度

.progress標籤{ 最小寬度：150像素; }

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

來源

2017-03-01 11:30:10

Bootstrap進度條標籤錯位

回答

相關問題