एक बूटस्ट्रैप प्रगति बार

Question

यहाँ के पाठ बह निकला मेरी HTML है:

<div class="progress"> 
    <div class="progress-bar progress-bar-warning progress-bar-striped first-bar" style="width:10%;">I want this text to overflow into the div to the right</div> 
    <div class="progress-bar progress-bar-success second-bar" style="width:90%;">I want this text to overflow into the div to the left</div> 
</div> 
<div class="progress"> 
    <div class="progress-bar progress-bar-warning progress-bar-striped first-bar" style="width:90%;">I want this text to overflow into the div to the right</div> 
    <div class="progress-bar progress-bar-success second-bar" style="width:10%;">I want this text to overflow into the div to the left</div> 
</div> 

यह मेरा सीएसएस है:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
.first-bar { 
    white-space: nowrap; 
    position: relative; 
    text-align: left; 
} 
.second-bar { 
    white-space: nowrap; 
    text-align: right; 
    direction: rtl; 
} 

मैं हर progress में सभी div तत्वों के पाठ अतिप्रवाह करना चाहते हैं - वर्गीकृत div। You can see in my Fiddle here जो मैं करने की कोशिश कर रहा हूं और यह कि मेरा सीएसएस बाएं div के पाठ को दाएं div में बहने के लिए काम करता है, लेकिन दूसरी तरफ नहीं (बाएं div में दाएं div का पाठ)। मैं इसे दूसरी तरफ कैसे काम कर सकता हूं? मैंने second-bar के लिए सीएसएस पर position: relative; जोड़ने का प्रयास किया है, लेकिन यह मेरे लिए काम नहीं करता है क्योंकि यह पहले परिदृश्य को तोड़ देता है।

Answer 1

1012 चौड़ाई वाली दूसरी बार की शैली में position: relative; जोड़ना पाठ को पहली प्रगति पट्टी से ऊपर रहने की अनुमति देता है। JS Fiddle Here. मैं इसे वास्तविक second-bar सीएसएस कक्षा में नहीं जोड़ सका, क्योंकि पहली बार दूसरी बार में बहती नहीं है।