Question

有没有办法像这样在progress中制作多行bootstrap栏：

[=============
==============
==============
=============]

（在相同的进度条div中）

我试图调整溢出适当性，但它似乎不起作用。

如果你知道另一种方法，请告诉我：

我有5％的比例，如10％，25％，15％，40％，10％我希望它显示如下：

<---10%--=====25%====
==--15%--========40%=  
=============--10%-->

由于

Answer 1

是的，Bootstrap 3有很多助手来加速开发。有几个可供选择。这是我的笔

[http://www.bootply.com/cXz75zjS4a][1] 


[http://codepen.io/jbeurel/pen/zuDAl][1]

<div class="container">
  <h2>Colored Progress Bars</h2>
  <p>The contextual classes colors the progress bars:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40% Complete (success)
    </div>
  </div>
  <div class="progress">
  <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      60% Complete (warning)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70% Complete (danger)
    </div>
  </div>
</div>

多行进度条引导程序

1 个答案: