css-Bootstrap下拉菜单三角形的奥秘是什么？

我想了解导航栏上是否包含Twitter Bootstrap下拉菜单之间的区别.

当它们包含在导航栏中时，展开菜单上会显示一个小三角形/箭头. 如果不使用导航栏，则不显示三角形:

我只花了两个小时浏览css / html，我仍然不明白为什么...

有什么想法吗？

在导航元素中，两种样式应用于下拉菜单. 它们如下:

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

两个三角形之间形成bootstrap下拉菜单样式，一个为浅灰色，另一个为深灰色. 如果您使用chrome开发工具，则可以检查这些元素并关闭不同的样式bootstrap下拉菜单样式，以获取它们的作用. 没有导航栏，这些样式不适用

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-147877-1.html