Question

想使用bootstrap 3内置进度条：

http://getbootstrap.com/components/#progress

但是把它放在图像的顶部，就像温度计一样。

我不确定从哪里开始，或者我是否应该不使用bootstraps进度条。

Answer 1

一种方法是使用绝对定位。

使用这种方法，外部容器具有一个位置是相对的，因此子元素具有绝对位置＆＃34; relative＆＃34;到容器而不是整个页面。使容器与图像x＆amp; y，位置只是使图像位置绝对为0,0。然后，将进度条放在看起来很好的位置。

<div id='outer-container' style='position:relative;width:x;height:y;'>

    <img style='position:absolute;width:x;height:y;z-index:0;' />

    <div class="progress" style='position:absolute;top:{halfy};left:0;z-index:1;'>
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        60%
        </div>
    </div>
</div>

另一种方法是将图像作为背景图像，然后将进度条放在具有背景图像的标记内。这样它就会覆盖，你不一定需要进行绝对定位调整。

Bootstrap 3进度条位于图像上方

1 个答案: