如何自动填充 Bootstrap 2 进度条中的剩余空间？

Question

我有一个 Bootstrap 进度条。我想要最后一个 div，它具有类

bar

bar-warning

来占据尚未被其他内部 div 占据的所有内容，而无需我进行计算。我想要得到类似

width: everything-else

的东西，但显然这不是有效的 css。我尝试了不同的解决方案，例如设置宽度

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>

Answer 1

只需将警告样式放在图表本身上，这样它们就会显示在其他条形图未显示的地方。

我们可以对标记进行一些修改以利用 Bootstrap 的样式类。通过将控制阶级移出一个层次，我们可以维持这样做所必需的祖先关系。这消除了对最后一个栏的需要，但如果你有一个，它无论如何也没有宽度，所以这不是问题。

<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-striped">
  <div class="progress bar bar-warning">
    <div class="bar bar-success" style="width: 14.5%;"></div>
    <div class="bar bar-info" style="width: 44.6%;"></div>
    <div class="bar bar-warning"></div>
  </div>

  <div class="progress bar bar-warning">
    <div class="bar bar-success" style="width: 54.5%;"></div>
    <div class="bar bar-info" style="width: 24.6%;"></div>
  </div>
</div>