上一篇: css – 如何确定iOS Safari中造成... 下一篇:css – input type =“image”在...

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

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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开发工具,您可以检查这些元素,并关闭不同的样式,以获得他们正在做的事情.没有导航栏,这些样式不适用