Bootstrap 3 中的分段进度条答案

【问题标题】：Segmented Progress Bar in Bootstrap 3Bootstrap 3 中的分段进度条
【发布时间】：2015-09-04 13:51:36
【问题描述】：

我有一个用户需要输入数据的网页。一旦他们输入 10 个项目，他们就可以继续。

我正在尝试创建一个进度条，以直观地表示他们已经输入/还有多少项目要输入。

这是我正在尝试创建的图像

到目前为止，我得到的最接近的是使用 Bootstrap 的堆叠进度条。但是，对于堆叠的条形图，未填充部分是一个完整的区域 - 它不显示还剩下多少段。 Here's a fiddle showing what I mean.

这是小提琴的标记：

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

我已经搜索了可以适应我的需求的类似示例，但运气不佳。我也不确定我应该搜索什么或如何称呼它。也许这会被认为是一个逐步的进度条？

我们将不胜感激任何提出解决方案的帮助。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 progress-bar

【解决方案1】：

在您的情况下，由于您不希望项目内部的区域按百分比填充，我建议您并排创建 10 个空 div，并添加类以在项目填充时用颜色填充它们。

只需点击下面的Run code sn-p，看看我的意思。

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

仅当您需要以百分比部分填充 div 时，才使用该引导组件。至于样式，您可以从 bootstrap 中导入样式。

但是，如果你非常想使用引导组件，我有一个丑陋的解决方法here。

【讨论】：