Question

我需要在固定位置右侧的百分比值，任何想法？我尝试将文本放在跨度内，并设置跨度与位置相对和填充左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，因为它不适用于绝对定位的元素，因此无关紧要。另请注意，我已添加到宽度略小的自定义容器中，只是为了便于在此代码段中清晰显示。你自己不需要这个：）

＆＃13;

.container {
  width: 80%;
}

.progress {
  height: 28px;
}

.progress-bar {
  background-color: #002C6C;
  font-size: 16px;
  line-height: 28px;
}

span {
  position: absolute;
  right: -20px;
  color: #002C6C;
}

＆＃13;

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

＆＃13;

希望这有帮助！：）

Bootstrap进度条，其余部分带有文本

1 个答案: