使引导进度条（时间轴）响应

Question

我将默认引导进度条设置为时间轴，以显示多个事件的持续时间。它可以像我预期的那样在所有主流浏览器中运行。 我的解决方案只有一个问题。当事件的持续时间太短时，两个日期开始相互重叠。

请在下面的小提琴中找到更多信息：

Fiddle

提琴HTML

<div class="progress">
  <div class="progress-bar progress-bar-default" role="progressbar" style="width: 20%;"></div>
  <div class="progress-bar progress-bar-success" data-start="" data-end="" role="progressbar" style="width: 60%;"></div>
  <div class="progress-bar progress-bar-default" role="progressbar" style="width: 20%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-default" role="progressbar" style="width: 5%;"></div>
  <div class="progress-bar progress-bar-success" data-start="" data-end="" role="progressbar" style="width: 80%;"></div>
  <div class="progress-bar progress-bar-default" role="progressbar" style="width: 15%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-default" role="progressbar" style="width: 40%;"></div>
  <div class="progress-bar progress-bar-success" data-start="" data-end="" role="progressbar" style="width: 20%;"></div>
  <div class="progress-bar progress-bar-default" role="progressbar" style="width: 40%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-default" role="progressbar" style="width: 60%;"></div>
  <div class="progress-bar progress-bar-success" data-start="" data-end="" role="progressbar" style="width: 5%;"></div>
  <div class="progress-bar progress-bar-default" role="progressbar" style="width: 35%;"></div>
</div>

小提琴CSS

.progress .progress-bar-default{
    background: #e2e7eb;
    height: 2px;
  margin-top: 5px;
}

.progress{
    border-radius: 0;
    height: 11px;
    background: none;
    margin: 0;
    overflow: visible;
  margin-bottom: 25px;
}


.progress-bar-success {
    position: relative;
}

.progress-bar-success:before {
    background: #707478;
    width: 1px !important;
    height: 100%;
    position: absolute;
    content: '-20.11.1990';
    top: 100%;
    left: 0;
    color: #707478;
}

.progress-bar-success:after {
    background: #707478;
    width: 1px !important;
    height: 100%;
    position: absolute;
    content: '-20.11.1991';
    top: 100%;
    right: 0;     
    color: #707478;
    direction: rtl;
}

我想要实现的是这样的：