引导进度条答案

【问题标题】：Bootstrap Progress Bar引导进度条
【发布时间】：2013-11-22 14:19:07
【问题描述】：

我正在使用 bootstrap 3 和进度条在排行榜上显示排名。

有没有办法自定义它以使其不显示“Out of”部分？

例如，它在技术上不是完成某事的进度，它只是一个将以相同方式显示的排名。所以真的我只是想能够移除它填充的盒子，但也让它在右侧也是圆形的。

这是我想要完成的事情

作为一个附带问题，知道如何删除进度条所在的 div 上的填充，以便它像其他内容一样在中间对齐？

【问题讨论】：

进度条就是条。任何其他文本都需要直接添加到您的 HTML 中
我想你误会了，我只是不想让进度条的背景（空白部分）显示出来。所以简而言之，填充的部分只需要是进度条的宽度，所以它总是“100%”，但根据百分比更短
你为什么不那么说而不是“out of”部分？只需使用 CSS 去除边框和背景颜色

标签： jquery html css twitter-bootstrap

【解决方案1】：

.progress {
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}

table .progress {
    margin-bottom: 0;
}

.progress-bar {
    border-radius: 4px;
}

在此处查看演示（感谢 Ohgodwhy）-http://jsfiddle.net/r4zkv/4/

【讨论】：

【解决方案2】：

只需覆盖引导程序的 .progress 类样式：

.progress {
  background-color: transparent;
  border-radius: 0px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.progress-bar {
    border-radius: 4px;
}

确保您不直接更改 bootstrap.css 文件，只需将上述样式添加到您的 site.css 文件中，该文件应始终位于任何项目中的 bootstrap.css 之后，以便您可以覆盖该自定义外观的引导程序默认样式。

【讨论】：