Bootstrap进度条标签未对齐

Question

我使用了4个bootsrap progess bar和progess标签。但每个进度条都未对齐。 progess栏与上面的进度条不匹配。以下是截图。

以下是我使用的代码。我想将上面的进度条与另一​​个进度条对齐。任何人都有解决这个问题的任何解决方案

<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

您有两个选择

1. 使用默认的bootstrap网格系统。分别将.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>

1. 为.progress-label提供最小宽度

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

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