Twitter Bootstrap'taki bir negatif değere dayanarak bir ilerleme çubuğu sağdan sola hareket ettirmek mümkün mü?

Question

Bu projeye başlamadan önce, bootstrap çerçevesinde bulunan ilerleme çubuğunu tersine çevirmenin mümkün olup olmadığını bilmek isterim, bu yüzden sağdan sola doğru bir değer gösterebilir mi? Bu sorunun ardındaki neden, pozitiften negatife gidebilen bir dizi sayıya sahip olduğum. Buradaki fikir, birbirinin yanında iki ilerleme çubuğu yerleştirmek ve değer pozitif olduğunda yüzde ile doğru olanı ve değer negatif olduğunda yüzde aralığını göstermek için sol çubuğa sahip olmaktır. Şimdilik, değerler statiktir, ancak bunlar gelecekte 'canlı' olacaktır.

Bunun üzerine herhangi bir girdi ve mümkünse benzer projelere yönelik bir işaretçi? Bu çerçeveyle ilgili yapılmış herhangi bir şey bulamadım.

Bu gibi yayınlara baktım: Reverse progressbar using CSS3, ancak Bootstrap kullanırken bu yol olup olmadığından emin değilim. Bu tür işlevler için css ile ilgili bir çeşit geçersiz kılma var mı?

Şu anda, benim ilerleme çubuğu şöyle kurgusunda:

 <li>Speed<span class="pull-right"><em>@Math.Round(DepthValue, 2) m/min</em></span> 
      <div class="progress progress-success"> 
       <div class="bar" style="width: @Model.SpeedRangePercentage%"></div> 
      </div> 
     </li> 

Answer 1

Aslında bunu çözdüm! :) Gerçekten kolay olduğu ortaya çıktı ve gerçekten de cevabın daha önce bağlantılı olarak gönderildi;

<li>Speed<span class="pull-right"><em>@Math.Round(DepthValue, 2) m/min</em></span> 
     <div class="progress progress-success"> 
      <div class="bar" style="width: @Model.SpeedRangePercentage%; display: block; float: right;"></div> 
     </div> 
    </li> 

Biçim ekleme "display: block;" ve "şamandıra; sağ", çubuğun sağdan sola hareket etmesine neden oldu.

Answer 2

arka plan ve ön plan renkleri geçmeyi deneyin ve yavaş yavaş ilerleme çubuğu değerini azaltmaktadır. Çalışabilir ama çok kafa karıştırıcı olacak.

Answer 3

Farklı bir seçenek önerebilirsem, bundan daha da kolay. bu yüzden sadece yüzer,

<div class="progress"> 
    <div class="progress-bar progress-bar-info" role="progressbar" style="width:40%;"></div> 
</div> 

.progress eleman bir blok düzeyinde elementtir veya içine istediğiniz şekilde .progress-bar konumlandırmak: Bu konuda bu şekilde düşünün. Here referans için bu fikrin hızlı bir kemanıdır.