css – Bootstrap下拉菜单三角形的谜团是什么?

前端之家收集整理的这篇文章主要介绍了css – Bootstrap下拉菜单三角形的谜团是什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想了解Twitter Bootstrap下拉菜单之间的区别,当它们包含在导航栏中时以及它们不是.

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

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

我刚刚花了两个小时浏览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.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开发工具,您可以检查这些元素,并关闭不同的样式,以获得他们正在做的事情.没有导航栏,这些样式不适用

猜你在找的CSS相关文章