Question

我试图创建一个时间轴，其中包含绘制的阶段，如时间轴，静态使用进度条和弹出窗口。

我接近我想要的但是我有两个问题：

弹出窗口位于进度条的底线，我需要在进度条的顶部放置顶部弹出窗口，反之亦然。>
可以选择顶层和底层阶段（例如建筑物和害虫，金融）在同一天（例如第10天）落下，所以我需要能够专门设置它们的位置可能是一个百分比的总进度条宽度。

我已将我迄今为止所做的工作添加到JS小提琴中。

由于

我的HTML

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" title="" style="width: 40%">Day 4
  </div>

    <div style="width: 100%;">
    <ul id="horizontal-style">
        <li class="mypopover" data-placement="top" data-content="Signed Contract" style="width: 0%; margin-bottom: 10px;"></li>
        <li class="mypopover" data-placement="bottom" data-content="Building & Pest" style="width: 40%"></li>
        <li class="mypopover" data-placement="top" data-content="Finance" style="width: 0%"></li>
        <li class="mypopover" data-placement="bottom" data-content="Unconditional" style="width: 50%"></li>
        <li class="mypopover" data-placement="top" data-content="Settlement" style="width: 5%"></li>   
    </ul>
    </div>

</div>

我的CSS

body {
    margin-top: 100px;
}
#horizontal-style {
    display: table;
    width: 100%;
}
#horizontal-style li {
    display: table-cell;
}

Answer 1

你可以这样：

http://jsfiddle.net/VHXaK/

HTML：

   <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" title="" style="width: 40%">Day 4</div>
    <div style="width: 100%;">
        <ul id="horizontal-style">
            <li class="mypopover" data-placement="top" data-content="Signed Contract" style="width: 0%; margin-bottom: 10px;"></li>
            <li class="mypopover" data-placement="bottom" data-content="Building & Pest" style="width: 40%"></li>
            <li class="mypopover" data-placement="top" data-content="Finance" style="width: 0%"></li>
            <li class="mypopover" data-placement="bottom" data-content="Unconditional" style="width: 50%"></li>
            <li class="mypopover" data-placement="top" data-content="Settlement" style="width: 5%"></li>
        </ul>
    </div>
</div>

CSS：

body {
    margin-top: 100px;
}
.progress-bar-success {
    position: relative;
}
#horizontal-style {
    display: table;
    width: 100%;
    position:absolute;
    height:20px;
}
#horizontal-style li {
    display: table-cell;
}

带弹出窗口的Bootstrap进度条 - 时间线

1 个答案: