Có thể di chuyển thanh tiến trình từ phải sang trái dựa trên giá trị âm trong Twitter Bootstrap không?

Question

Trước khi bắt tay vào dự án này, tôi muốn biết liệu có thể đảo ngược thanh tiến trình được tìm thấy trong khung bootstrap, vì vậy nó có thể hiển thị một giá trị từ phải sang trái không? Lý do đằng sau câu hỏi này là tôi có một loạt các con số có thể chuyển từ dương sang âm. Ý tưởng là đặt hai thanh tiến trình cạnh nhau và có một thanh bên phải hiển thị phạm vi phần trăm khi giá trị là dương và thanh bên trái để hiển thị phạm vi phần trăm khi giá trị âm. Hiện tại, các giá trị là tĩnh, nhưng các giá trị này sẽ là 'hoạt động' trong tương lai.

Bất kỳ đầu vào nào về điều này và nếu có thể, con trỏ đến các dự án tương tự? Tôi đã không thực sự tìm thấy bất cứ điều gì có liên quan thực hiện với khuôn khổ này.

Tôi đã xem các bài đăng như thế này: Reverse progressbar using CSS3, nhưng tôi không chắc chắn nếu đây là cách để đi khi sử dụng Bootstrap. Có một số loại ghi đè có sẵn cho loại chức năng, liên quan đến css?

Ngay bây giờ, thanh tiến trình của tôi được thiết lập như sau:

 <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

Tôi thực sự đã tìm ra! :) Hóa ra là thực sự dễ dàng, và thực sự câu trả lời đã được tìm thấy trong bài viết được liên kết trước đó;

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

Thêm kiểu "display: block;" và "float; right" khiến thanh di chuyển từ phải sang trái.

Answer 2

Hãy thử chuyển đổi background và foreground và giảm dần tỷ trọng giá trị thanh tiến trình. Nó có thể làm việc nhưng nó sẽ rất rắc rối.

Answer 3

Nếu tôi có thể đề xuất một tùy chọn khác, nó thậm chí còn dễ dàng hơn thế này. Hãy suy nghĩ về nó theo cách này:

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

Yếu tố .progress là một yếu tố khối cấp, vì vậy chỉ cần phao hoặc vị trí .progress-bar tuy nhiên bạn thích bên trong nó. Here là một ý tưởng nhanh về ý tưởng này để tham khảo.