twitter-bootstrap 如何更改引导插入符号的指向位置？

How to change the bootstrap caret pointing position?

提问by Kapitol

Within bootstrap the caret is always pointing down. I would like it to point to the right when when the menu is closed. See demo.

在引导程序中，插入符号总是向下。当菜单关闭时，我希望它指向右侧。见演示。

Demo: http://jsfiddle.net/Maty2/

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

HTML

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

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

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

I am not sure what I need to change in order to add this functionality. Does anyone have a suggestion? or possibly a solution?

我不确定我需要更改什么才能添加此功能。有人有建议吗？或者可能的解决方案？

Thanks

谢谢

回答by Kapitol

After some discussion with a friend, we came up with adding this class:

经过与朋友的讨论，我们想出了添加这个类：

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

Though we weren't able so solve the # from being added to the end of the URL. If anyone knows of a suggestion, that would be great.

尽管我们无法解决 # 被添加到 URL 末尾的问题。如果有人知道一个建议，那就太好了。

回答by behzad

Simple:

简单的：

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

回答by Omnichronous

1. If your element starts out collapsed, make sure to add the class explicitly

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

2. Use this 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;
   }
   

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