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

【问题标题】：Bootstrap 4 Inline Progress bar with <h3> element带有 <h3> 元素的 Bootstrap 4 内联进度条
【发布时间】：2017-10-26 20:40:45
【问题描述】：

我正在尝试显示带有 <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> 标记和进度条？我错过了什么吗？

【问题讨论】：

标签： html twitter-bootstrap progress-bar bootstrap-4

【解决方案1】：

有一个bootstrap 4类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

【讨论】：