我有一个 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>
只需将警告样式放在图表本身上,这样它们就会显示在其他条形图未显示的地方。
我们可以对标记进行一些修改以利用 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>
<div class="progress-striped">
<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>