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

Question

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

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

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

Answer 1

使用网格Luke。

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