如何更改bootstrap caret指向位置？

Question

在bootstrap中，插入符總是朝下。當菜單關閉時，我希望它指向右側。看演示。

演示：http://jsfiddle.net/Maty2/

HTML

<div class="functionbox funtog"> <a class="btn dropdown-toggle fleft" data-toggle="collapse" data-target="#demo-1" href="#"><span class="caret"></span></a> 
     <h3>Recent</h3> 
     </div> 
     <div id="demo-1" class="collapse in"> 
     <div class="whitebox"> 
      <div id="myprojs">Hide this</div> 
    </div> 
</div> 

CSS

.whitebox { padding: 20px; border-top: 1px dotted #b3b3b3; border-left: 1px dotted #b3b3b3; color: #444; background-color: white; position: relative; } 
.functionbox .btn { border: 2px solid #888; background: none; padding: 4px; margin: 0; height: 10px; } 
.functionbox .btn .caret { margin: 2px; border-top: 4px solid #888; } 
.functionbox { position: relative; } 
.functionbox h3 { font-size: 1.4em; border-bottom: 3px solid #F2F2F2; } 
.functionbox h2 { font-size: 1.8em; border-bottom: 3px solid #F2F2F2; } 
.dropdown-menu { mid-width: 250px; } 
.funtog .fleft { float: left; border: none; margin: 10px 10px 0 0; } 
.funtog h3 { border-bottom: 1px dotted #b3b3b3; } 

JS

<script src="js/jquery.js"></script> 
<script src="js/bootstrap-dropdown.js"></script> 
<script src="js/bootstrap-button.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 

我不確定需要更改哪些內容才能添加此功能。有沒有人有建議？或者可能是解決方案？

感謝

Answer 1

與朋友經過一番討論後，我們提出了加入這個類：

.btn.collapsed > .caret {border-left: 4px solid #888; border-right: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent;} 

雖然我們不能被添加到URL的末尾，以便解決＃ 。如果有人知道一個建議，那會很棒。

Answer 2

簡單：

<span class="dropup"> 
    <span class="caret"></span> 
</span> 

Answer 3

1. 如果你的元素開始合攏狀態，確保要添加的類別明確

   <a class="btn dropdown-toggle fleft collapsed" data-toggle="collapse" data-target="#demo-1" href="#"><span class="caret"></span></a> 
   

2. 使用此CSS

   // open state - points up 
   .functionbox .caret { 
       border-top-width: 0; 
       border-bottom-width: 5px; 
       border-bottom-style: solid; 
   } 
   
   // collapsed state - points down 
   .functionbox .collapsed .caret { 
       border-top-width: 5px; 
       border-bottom-width: 0; 
   }