Html 引导进度条标签未对齐

我使用的是4个bootsrap进程条和进程标签。但每个进度条都没有对齐。进度条与上面的进度条不匹配。下面是截图

下面是我使用的代码。我想将上面的进度条与另一个进度条对齐。有人有办法解决这个问题吗

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

.进度{高度：25px；}
.progress.sr only{位置：相对；}
.进度条{行高：25px；}
.progress标签{float:left；margin-right:em；}
&时代；
模态头
总内存：
完成40%（成功）
已用内存：
完成40%（成功）
可用内存：
完成40%（成功）
内存使用：
完成40%（成功）
完成50%（信息）
完成60%（警告）
完成70%（危险）
关

**//标签位于此处，用于修复所有标签，其余用于进度条**
总内存：
完成40%（成功）

您有两个选择

使用默认的引导网格系统。分别将

.col-xs-3

和

和

类添加到

进度标签和
进度条
类中

.进展{
高度：25px；
}
.progress.sr{
位置：相对位置；
}
.进度条{
线高：25px；
}
.进度标签{
浮动：左；
右边距：em；
}
总内存：
完成40%（成功）
已用内存：
完成50%（成功）
可用内存：
60%完成（成功）
内存使用：
70%完成（成功）
完成50%（信息）
完成60%（警告）
完成70%（危险）

要对问题进行排序，请设置标签的宽度。另外，在css的第行

margin right:em@Jeeva你所说的进度条不匹配是什么意思。您是在谈论进度条的宽度还是对齐或标签文本
    <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>