如何在进度条旁边添加标题？答案

【问题标题】：How to add a title beside a progress bar?如何在进度条旁边添加标题？
【发布时间】：2017-04-11 07:35:48
【问题描述】：

我正在努力实现这样的目标

我使用引导程序并尝试过，但它没有对齐，即标题略低于进度条。有人可以帮忙吗？抱歉，如果之前有人问过类似的问题。
这是我的代码：

<div class="container"> 
    <p class="progress-label">Java <progress value="65" max="100" style="font-size: 80px; float: inherit;"> </p> 
</div> 
<div class="container"> 
    <p class="progress-label">Python <progress value="50" max="100" style="font-size: 80px"> </p> 
</div>
<div class="container">
     <p class="progress-label">C <progress value="50" max="100" style="font-size: 80px"> </p> 
</div>

【问题讨论】：

你能把你的代码贴出来吗。
Java

Python

C
好吧，至少您不必费心为“HTML”添加另一个进度条

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

使用网格卢克。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-3">Java</div>
    <div class="col-xs-8">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">Python</div>
    <div class="col-xs-8">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span class="sr-only">60% Complete</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xd-3">
      <div class="col-xs-3">C</div>
      <div class="col-xs-8">
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
          </div>
        </div>
      </div>
    </div>
  </div>

【讨论】：