如何让Bootstrap 2进度条的最后一个bar自动填充剩余空间？

问题描述 #

我使用Bootstrap 2.3.2的进度条，希望带有bar和bar-warning类的最后一个<div>无需手动计算宽度，自动占据其他内部<div>未占用的所有空间。我想要类似width: everything-else的效果，但这不是合法的CSS。我尝试过将width设为auto、100%、-100%等方案，但均无效。另外我还尝试在该区域添加文本并让文本相对于未填充区域居中，但也没能实现。

原始代码示例：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" integrity="sha512-Fik9pU5hBUfoYn2t6ApwzFypxHnCXco3i5u+xgHcBw7WFm0LI8umZ4dcZ7XYj9b9AXCQbll9Xre4dpzKh4nvAQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<div class="progress progress-striped">
    <div class="bar bar-success" style="width: 14.5%;"></div>
    <div class="bar bar-info" style="width: 14.6%;"></div>
    <div class="bar bar-warning" style="width: 70.9%;"></div>
</div>

解决方案 #

方法1：自动填充剩余空间（无需计算） #

利用CSS浮动和overflow: hidden的特性，修改最后一个bar的样式：

<div class="progress progress-striped">
    <div class="bar bar-success" style="width: 14.5%;"></div>
    <div class="bar bar-info" style="width: 14.6%;"></div>
    <div class="bar bar-warning" style="float: none; overflow: hidden;"></div>
</div>

原理：前面的bar默认是float: left，会脱离文档流；最后一个bar取消浮动，默认占满父容器宽度，overflow: hidden会让它自动适配前面浮动元素剩下的空间，完美实现“自动占满剩余”的效果。

方法2：CSS calc计算剩余宽度（需手动汇总前面宽度） #

如果能确定前面所有bar的总宽度，可以用calc()直接计算剩余空间：

<div class="progress progress-striped">
    <div class="bar bar-success" style="width: 14.5%;"></div>
    <div class="bar bar-info" style="width: 14.6%;"></div>
    <div class="bar bar-warning" style="width: calc(100% - 29.1%);"></div>
</div>

注：这里29.1%是前面两个bar的宽度总和（14.5%+14.6%），适合前面宽度固定的场景。

实现文本居中显示 #

如果要在warning的bar内添加文本并让它在剩余空间居中，只需补充文本对齐和行高样式：

<div class="progress progress-striped">
    <div class="bar bar-success" style="width: 14.5%;"></div>
    <div class="bar bar-info" style="width: 14.6%;"></div>
    <div class="bar bar-warning" style="float: none; overflow: hidden; text-align: center; line-height: 20px;">剩余空间</div>
</div>

行高设为20px是因为Bootstrap 2的.progress默认高度为20px，这样文本可以垂直居中。

内容的提问来源于stack exchange，提问作者kije Enki