css - Bootstrap 进度条和剩余部分的文本

Question

我需要百分比值在固定位置的右侧，有什么想法吗？我尝试将文本放在一个跨度内，并将跨度设置为相对位置和 padding-left 120%。但随着条形图的值变高，文本会被推送并消失。

CSS

.progress {
                height: 28px;

                .progress-bar {
                    background-color: #002C6C;
                    font-size: 16px;
                    line-height: 28px;
                }

                span {
                    position: relative;
                    padding-left: 120%;
                    color: #002C6C;
                }
            }

条形图的 html

<div class="row">
                <div class="col-md-4">
                    <label>Caldas / Coberturas</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"><span>68%</span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label>Pacotes de Variedade</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label>Sobremesas</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"><span>10%</span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label>Sorvetes / Gelados</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>
                    </div>
                </div>
            </div>
            <a href="#">+25 Subclasses</a>
        </div>

Answer 1

你想要做的是给 .progress-bar span 元素一个 absolute position 并将它们设置在 right 上.

因为您希望条形图本身占据可用宽度的 100%，所以您需要为跨度指定一个负的 right 值。在下面的示例中，我使用了 -20px。

请注意，您还可以删除 padding-left，因为它不适用于绝对定位的元素，因此无关紧要。另请注意，我添加了一个宽度稍小的自定义容器，只是为了让此代码段更加清晰。你自己不需要这个:)

.container {
  width: 80%;
}

.progress {
  height: 28px;
}

.progress-bar {
  background-color: #002C6C;
  font-size: 16px;
  line-height: 28px;
}

span {
  position: absolute;
  right: -20px;
  color: #002C6C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <label>Caldas / Coberturas</label>
    </div>
    <div class="col-md-8">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"><span>68%</span></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <label>Pacotes de Variedade</label>
    </div>
    <div class="col-md-8">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <label>Sobremesas</label>
    </div>
    <div class="col-md-8">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"><span>10%</span></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <label>Sorvetes / Gelados</label>
    </div>
    <div class="col-md-8">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>
      </div>
    </div>
  </div>
  <a href="#">+25 Subclasses</a>
</div>

希望对您有所帮助! :)