css - Bootstrapドロップダウンメニューの三角形の謎は何ですか？

Question

TwitterBootstrapドロップダウンメニューがナビゲーションバーに含まれている場合と含まれていない場合の違いを理解しようとしています。

それらがナビゲーションバーに含まれている場合、展開されたメニューに少し上向きの三角形/矢印が表示されます。この三角形は、ナビゲーションバーが使用されていない場合は表示されません。

http://twitter.github.com/bootstrap/javascript.html#dropdowns

私はcss/htmlを探索するのに2時間費やしましたが、なぜかわかりません...

何か案が ？

Answer 1

nav要素内のドロップダウンメニューには2つのスタイルが適用されます。それらは次のとおりです。

.navbar .nav > li > .dropdown-menu::before {
   position: absolute;
   top: -7px;
   left: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #CCC;
   border-left: 7px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   content: '';
 }
 .navbar .nav > li > .dropdown-menu::after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
  }

それらは、互いの上に2つの三角形を作成し、1つは明るい灰色、もう1つは暗い灰色です。Chrome開発ツールを使用している場合は、これらの要素を検査し、さまざまなスタイルをオフにして、それらが何をしているのかを感じることができます。これらのスタイルは、ナビゲーションバーなしでは適用されません

Answer 2

これをCSSに追加するだけで、ナビゲーションバー内にドロップダウンを配置せずにドロップダウンメニューの矢印を使用できるようになります

.dropdown-menu:before {
   position: absolute;
   top: -7px;
   left: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #CCC;
   border-left: 7px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   content: '';
 }

.dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
  }

.dropdown-menu:before, .dropdown-menu.pull-right:before {
right: 12px;
left: auto;
}

.dropdown-menu::after, .dropdown-menu.pull-right:after {
right: 13px;
left: auto;
}

Answer 3

三角形は、次の構文で生成​​できます。

    <b class="caret dropdown-toggle"></b>