拆分进度条

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; 
}

给你这个:

示例演示

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

<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>