css - Bootstrap Progress Bar with Popovers - 时间线

Question

我正在尝试使用进度条和弹出框静态创建一个时间线，其中包含绘制的阶段，如时间线。

我越来越接近我想要的，但是我有 2 个问题:

1. 弹出窗口卡在进度条的底线上，我需要让顶部弹出窗口位于进度条的顶部，反之亦然。
2. 可以选择在同一天(例如第 10 天)下降顶部和底部阶段(例如建筑和害虫、金融)，因此我需要能够根据总数的百分比具体设置它们的位置进度条宽度。

我已将到目前为止所做的添加到 JS fiddle 中。

谢谢

http://jsfiddle.net/elogicmedia/pGr2M/

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