中心进度条说明

Question

我正在寻找一种方法来获得始终居中的进度条描述。 我在面板的标题中有一个进度条，告知用户有关面板内容的信息。

问题：描述始终位于进度条的左侧（成功部分）。

我想要的是描述始终位于栏的中心，如下所示：

请参阅下面的我的尝试：

＆＃13;

＆＃13;

.inline .in {
    display: inline-block;
    margin: 0 10px;
}

.panel .inline .progress {
    top: 7px;
    position: relative;
    margin-left: 10%;
    background-color: red;
}

.panel .progress {
    width: 40%;
    border-radius: 0;
}

.panel-heading-btn {
    float: right;
}

.panel-title {
    line-height: 20px;
    font-size: 12px;
}

.panel-heading {
    padding: 10px 15px;
    border: none;
}

＆＃13;

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


<div class="container">
  <h2>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-heading-btn">
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
      </div>
      <div class="inline">
        <h4>Panel Heading</h4>

        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:50%">
        50 / 100 available                          </div>
        </div>
        
        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:10%">
        10 / 100 available                          </div>
        </div>
        
        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:90%">
        90 / 100 available                          </div>
        </div>
      </div>
    </div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要的是独立于整个进度条构造的东西。浮子，宽度。

这样做的一种方法是将描述放在自己的元素中并绝对定位。

.inline .in {
  display: inline-block;
  margin: 0 10px;
}

.panel .inline .progress {
  top: 7px;
  position: relative;
  margin-left: 10%;
  background-color: red;
}

.panel .progress {
  width: 40%;
  border-radius: 0;
}

.panel-heading-btn {
  float: right;
}

.panel-title {
  line-height: 20px;
  font-size: 12px;
}

.panel-heading {
  padding: 10px 15px;
  border: none;
}

.progress-description {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  text-align: center
}

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


<div class="container">
  <h2>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-heading-btn">
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
      </div>
      <div class="inline">
        <h4>Panel Heading</h4>

        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:50%">
            <span class="progress-description">50 / 100 available</span> </div>
        </div>

        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:10%">
            <span class="progress-description">10 / 100 available</span> </div>
        </div>

        <div class="progress in">
          <div class="progress-bar progress-bar-success used_progress" role="progressbar" aria-valuenow="32.14" aria-valuemin="0" aria-valuemax="100" style="width:90%">
            <span class="progress-description">90 / 100 available</span> </div>
        </div>
      </div>
    </div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>