Bootstrap下拉菜单三角形的神秘之处是什么？

Question

我试图理解Twitter Bootstrap下拉菜单当它们包含在导航栏中时和它们不包含时的区别.

当它们被包含在导航栏中时,在展开的菜单上会显示一个小的向上三角形/箭头.没有使用导航栏时,不会显示此三角形:

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

我只花了两个小时探索css/html,我仍然不明白为什么...

任何的想法 ？

Answer 1

在nav元素中,有两种样式应用于下拉菜单.它们如下:

.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: '';
  }

他们创建了两个三角形,一个是浅灰色,另一个是深灰色.如果您使用chrome开发人员工具,则可以检查这些元素并关闭不同的样式以了解他们正在做什么.如果没有导航栏,则不会应用这些样式