bootstrap3 - navbar-navのクリックでキャレットリバース

Question

私はブートストラップ3を使用していますが、クリックしたときにキャレットを逆転させるようなCSSの数行が見つかりました。あなたの参考のために

.navbar-nav .open > a > b.caret { 
    border-top: none; 
    border-bottom: 4px solid; 
} 

、これは私の（かなり標準）ドロップダウンです：

<ul class="nav navbar-nav navbar-right"> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
     Some Title Text <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li>Some Submenu text</li> 
     <li>Some Submenu text</li> 
    </ul> 
    </li> 
</ul> 

なぜこの出来事はありますか？私はあなたの助けが深くそれを理解することを望んでいます。 ありがとうございました！

Answer 1

ブートストラップcaretは、CSSで三角形を描画するのに人気のあるトリックを使用します。

あなたは上部と下部の矢印のためHERE

CSSコード（三角形）それを見ることができます。

.arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 
.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid black; 
}