Как изменить положение указателя каретки начальной загрузки?

В бутстрапе курсор всегда указывает вниз. Я хотел бы, чтобы он указывал вправо, когда меню закрыто. Смотрите демо.

Демонстрация: 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>

Я не уверен, что мне нужно изменить, чтобы добавить эту функциональность. У кого-нибудь есть предложение? или возможно решение?

Спасибо


twitter-bootstrap caret
person Kapitol    schedule 14.12.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

После некоторого обсуждения с другом мы придумали добавить этот класс:

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

Хотя мы не смогли решить, что # добавляется в конец URL-адреса. Если кто-нибудь знает предложение, это было бы здорово.

person Kapitol    schedule 17.12.2012

arrow_upward
2
arrow_downward

Простой:

<span class="dropup">
    <span class="caret"></span>
</span>
person behzad    schedule 04.01.2015

arrow_upward
0
arrow_downward

  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;
}
person Omnichronous    schedule 25.01.2016