Question

我正在尝试使用postion在父div的底部放置一个进度条：absolute和bottom：0但似乎这些样式与进度条冲突

<div class="progress" style="position:absolute; bottom:0px;">
        <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
        0%
        </div>
</div>

我创造了这个小提琴：https://jsfiddle.net/DTcHh/12732/

这样做的正确方法是什么？

Answer 1

问题是将位置设置为绝对值。您的宽度不会自动放入全宽。

您可以尝试以下内容：

.progress {margin：10px;} / *适用于此类而不是body * /

<div style="position:absolute; bottom:0px;width: 100%;">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
    </div>
</div>

https://jsfiddle.net/DTcHh/12735/

var i = 0;

$("#nextStepBtn").click(function () {
    i++;
    if (i <= 100) {
        $(".progress").children().each(function () {
            $(this).attr("aria-valuenow", i.toString()).css("width", i.toString() + "%").html(i + '%');
        });
    }
});

 .progress {
    margin: 10px;
}

.progress-bottom-container {
    position:absolute;
    bottom:0px;
    width:100%;
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id="nextStepBtn" class="btn btn-default">Next step</button>
<br>
<br>
<div class="progress-bottom-container">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
    </div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
</div>

Answer 2

position: absolute进度条的问题是条的宽度。

将进度条的宽度设为width: 96%;，您将拥有相应的进度条。

https://maven.apache.org/guides/introduction/introduction-to-the-pom.html

Bootstrap - 将进度条放在父div的底部

2 个答案: