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

Posted

技术标签:

【中文标题】带有英雄单元文本的 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">

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

【讨论】:

以上是关于带有英雄单元文本的 Twitter Bootstrap 进度条未正确显示的主要内容,如果未能解决你的问题,请参考以下文章

带有按钮 + 盒装文本问题的响应式英雄图像

Twitter文本js,不计算包含带有#的url的文本的长度!

如何使用 Twitter 引导响应更改导航栏折叠阈值?

带有 twitter-bootstrap 的下拉菜单

带有图像和文本字段的自动布局表格单元格?

Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分