带有<h3>元素的Bootstrap 4内联进度条

Question

我正在尝试使用<h3>标记显示Bootstrap 4进度条。令人惊讶的是，该栏比<h3>略高，如下所示：

我的尝试是将row课程分为两部分。 HTML：

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <h3 class="progress_title">Python</h3>
    </div>
    <div class="col-md-10">
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <h3 class="progress_title">JavaScript</h3>
    </div>
    <div class="col-md-10">
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
  </div>  
</div>

我已在此codepen pen

中测试了此代码

我的问题是，如何以正确的对齐方式显示<h3>代码和进度条内联？我错过了什么吗？

Answer 1

有一个bootstrap 4 class align-self-center

<div class="col-md-10 align-self-center">
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

它应该将子div与中间对齐。

您可以找到更多选项here