带有英雄单元文本的 Twitter Bootstrap 进度条未正确显示

Posted 2023-03-05

【中文标题】带有英雄单元文本的 Twitter Bootstrap 进度条未正确显示

【英文标题】：Twitter Bootstrap progress bar with text in hero-unit is not displayed properly

【发布时间】：2012-12-14 22:25:54

【问题描述】：

如果标准 Twitter Bootstrap 进度条在 <div class="hero-unit"> 内，我对带有一些文本的标准 Twitter Bootstrap 类有问题：

<div class="hero-unit">
<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 80%;">80%</div>
    </div>
</div>
</div>
​

这是一个jsFiddle 代码，表明文本没有正确对齐。 为什么会发生这种情况以及如何解决？我试图修复它，但没有运气。

谢谢。

【参考方案1】：

是hero-unit 上的line-height: 30px 导致了问题。

我已经像这样更改代码：

<div class="hero-unit" style="line-height: inherit">

当然最好给它分配一个类，而不是使用样式属性。