css - Bootstrap 中有多个进度条，左侧标签向右推

Question

我想使用带有标签的 Bootstrap 4 有多个进度条，或者至少在其左外侧有文本。到目前为止，这是可行的，但有多个酒吧，它看起来像一个倒置的楼梯。

我目前拥有的代码如下：

    <div class="container">
      <p class="progress-label">
        C#
      </p>
      <div class="progress" id="prog1">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
    </div>
    <div class="container">
      <p class="progress-label">
        C#
      </p>
      <div class="progress" id="prog1">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
    </div>

与 CSS

.progress-label {
  float: left;
  margin-right: 1em;
}  

取自How to put a label side by a progress bar with bootstrap?
到目前为止，我不确定我能做些什么来使它正常工作，两个条都对齐。

这是一个小提琴：

标签： cssbootstrap-4

Answer 1

尝试将每个进度条包装在一个名为“progressHolder”的类中。然后在 CSS 中添加 'overflow:hidden' 因为你在 'progress-label' 中使用了 'float:left'。

HTML 代码：

<div class="container">
   <div class="progressHolder">
     <p class="progress-label">
       C#
     </p>
     <div class="progress" id="prog1">
       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
         aria-valuemax="100" style="width: 40%">
         <span class="sr-only">20% Complete</span>
       </div>
     </div>
   </div>
 </div>
 <div class="container">
   <div class="progressHolder">
     <p class="progress-label">
       C#
     </p>
     <div class="progress" id="prog2">
       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
         aria-valuemax="100" style="width: 40%">
         <span class="sr-only">20% Complete</span>
       </div>
     </div>
   </div>
 </div>

CSS 代码：

.progressHolder {
  overflow: hidden;
}

.progress-label {
  float: left;
  margin: -5px 15px 15px 0;
}  

演示： https ://codepen.io/Bibeva/pen/RwNMjNB