Bootstrap中的分段进度条3
我有一个用户需要输入数据的网页。 一旦他们输入10个项目，他们可以继续。
我正在尝试创建一个进度条，以直观地表示它们已输入/已输入的项目数。
这是我想要创建的图像
到目前为止，我得到的最接近的是使用Bootstrap的堆叠进度条。 但是，对于堆叠的钢筋，未填充的部分是一个不间断的区域 - 它没有显示剩余的部分。 这是一个小提琴，展示我的意思。
这是来自小提琴的标记：
<div class="container">
<div class="progress progress-bar-segmented">
<div class="progress-bar" style="width: 10%"></div>
<div class="progress-bar" style="width: 10%"></div>
<div class="progress-bar" style="width: 10%"></div>
</div>
</div>
我已经搜索了可以适应我的需求的类似示例，但没有多少运气。 我也不确定我应该搜索什么或者该怎么称呼它。 也许这会被认为是一个逐步进步的酒吧？
任何帮助提出解决方案将不胜感激。
在你的情况下，因为你不希望项目内的区域被百分比填充，所以我会建议并排创建十个空白div，并添加这些类以在填充项目时用颜色填充它们。
只需点击下面的Run code snippet ，看看我的意思。
.container {
width: 100%;
}
.item {
width: 10%;
border: 1px solid grey;
background-color: lightgray;
border-radius: 3px;
margin-right: 2px;
float: left;
display: block;
height: 20px;
}
.filled {
background-color: blue !important;
}<div class="container">
<div class="item filled"></div>
<div class="item filled"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>