進行状況バーの前後にボタンを追加する方法

Question

進行状況バーの前後にボタンを直接追加する方法はありません。

結果は次のようになります。投票して何かを投票し、進捗バーが反応します。

<a href="#" class="btn btn-xs btn-default">+</a> 
<div class="progress"> 
    <div class="progress-bar progress-bar-success progU" style="width: <%=question.percentU%>%"> 
     <span class="voteText"><%=question.percentU%>%</span> 
    </div> 
    <div class="progress-bar progress-bar-danger progD" style="width: <%=question.percentD%>%"> 
     <span class="voteText"><%=question.percentD%>%</span> 
    </div> 
</div> 
<a href="#" class="btn btn-xs btn-default">-</a> 

ありがとうございます。

Answer 1

次のように水平にし、それらを合わせる別のdiv要素でプログレスバーとボタンを入れてみてください：今すぐ

<!-- div to contain the progress bar --> 
<div class="progress-container"> 
<!-- Div for left progress bar buttons --> 
    <div class="left-progress-bar"> 
    <a href="#" class="btn btn-xs btn-default">+</a> 
    </div> 
<!-- Div for center progress bar --> 
    <div class="center-progress-bar"> 
    <div class="progress"> 
    <div class="progress-bar progress-bar-success progU" style="width: 60%"> 
     <span class="voteText">60%</span> 
    </div> 
    <div class="progress-bar progress-bar-danger progD" style="width: 40%"> 
     <span class="voteText">40%</span> 
    </div> 
    </div> 
    </div> 
    <!-- Div for right progress bar buttons --> 
    <div class="right-progress-bar"> 
    <a href="#" class="btn btn-xs btn-default">-</a> 
</div> 
</div> 

はそれらを保つために、それには、このCSSを適用する横方向にそろう

.progress-container{ 
    width: 300px; 
} 
.left-progress-bar{ 
    float:left;width:5%; 
} 
.center-progress-bar{ 
    float:left;width:90%; 
} 
.right-progress-bar{ 
    float:left;width:5%; 
}