拆分进度条

Question

此时，我有以下进度条：

使用以下代码创建：

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" 
        aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Process1
    </div>
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" 
        aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Process2
    </div>
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" 
        aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Process3
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25" 
        aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Process4
    </div>


</div>

我想要实现的是区分不同的过程;如果颜色不同（如Process3和Process4之间），实际上它是明显区分的。但是，如果颜色相同，则很难知道％属于哪个进程或另一个进程。所以我想在它们之间插入一条线。 总之，我想要类似以下内容：

Answer 1

border-right除.progress-bar以外的所有:last-child都可以解决问题：

.progress-bar {
    border-right: solid 5px #FFF;
}
.progress-bar:last-child {
    border: none; 
}

给你这个：

示例演示

＆＃13;

＆＃13;

.progress-bar {
  border-right: solid 5px #FFF;
}
.progress-bar:last-child {
  border: none;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
    Process1
  </div>
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
    Process2
  </div>
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
    Process3
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
    Process4
  </div>


</div>

＆＃13;

＆＃13;

＆＃13;