引导进度条标签未对齐答案

【问题标题】：Bootstrap progress bar label misaligned引导进度条标签未对齐
【发布时间】：2017-07-20 13:37:30
【问题描述】：

我正在使用 4 个引导程序进度条和进度标签。但是每个进度条都是错位的。进度条与上述进度条不匹配。下面是截图。

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

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

【问题讨论】：

要对问题进行排序，请将宽度设置为标签。此外，您在margin-right: em; 线上的 css 中缺少单元；
@Jeeva 你说的进度条不匹配是什么意思。您是在说进度条的宽度还是对齐或标签文本

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

你有两个选择

使用默认的引导网格系统。将.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 一个最小宽度

.进度标签{ 最小宽度：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>

【讨论】：

【解决方案2】：

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

【讨论】：