Bootstrap进度条

Question

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

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

例如，它在技术上没有完成某些东西的进展，它只是一个将以相同的方式显示的等级。所以我真的希望能够移除它填充的盒子，但也让它在右侧也是如此。

这是我想要完成的事情

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

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/

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之后，以便您可以覆盖该自定义外观的引导默认样式。