内嵌进度条的中心说明

Question

即时通讯寻找一种方法来获得居中进度条说明。 我在面板的标题中有一个进度条来通知用户有关面板内容。

问题是：如果我把它放在.progress-bar容器中，或者在右边，如果我把它放在.progress容器中，描述总是在进度条的左边。请看下面的例子来看看我的意思。

我想要的是一个始终居中的描述 - >必须有一个简单的方法来完成。 :-)

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

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

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>