Bootstrap 进度条

Question

我正在使用Bootstrap 3和进度条来展示排行榜上的排名。

是否有方法可以自定义不显示“Out of”部分？

例如，完成某事并不是进度，它只是将以相同方式显示的排名。所以我只想能够删除其正在填充的框，但也使其右侧是圆形。

这是我要完成的目标。

作为附加问题，您有没有想法如何删除进度条所在div的填充，以使其像其他内容一样居中对齐？

- SBB

---

进度条只是一个条形图。任何其他文本都需要直接添加到您的HTML中。 - Phil

我觉得你误解了，我只是不想让进度条的背景（空白部分）显示出来。简而言之，填充的部分需要与进度条的宽度相同，因此始终为“100%”，但根据百分比缩短。 - SBB

那你为什么不直接说呢，而是用“out of”这个词组？只需要使用CSS来移除边框和背景颜色即可。 - Phil

Answer 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/

- Phil

Answer 2

只需覆盖 Bootstrap 的 .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之后，以便覆盖bootstrap默认样式以获得自定义外观。

- Brian Ogden