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

问题描述

我试图理解当Twitter Bootstrap下拉菜单包含在导航栏中时与之不同的区别。

当它们包含在navbar，一个向上的三角形/箭头显示在扩展菜单上。没有使用导航栏时，不显示此三角形：

我只花了两个小时浏览css / html，我还是

解决方案

在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开发者工具，您可以检查这些元素并关闭不同的样式，以了解他们正在做什么。如果没有导航栏

，则不会应用这些样式

I'm trying to understand the difference between Twitter Bootstrap dropdown menus when they are included within a navbar and when they are not.

When they are included into a navbar, a little up triangle/arrow is showed upon the expanded menu. This triangle is not showed when no navbar is used :

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

I just spent two hours exploring the css/html, I still don't understand WHY...

Any idea ?

解决方案

There are two styles applied to the dropdown menu when inside the nav element. They are as follows:

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

They create two triangles on top of each other one light grey, the other dark grey.If you use chrome developer tools you can inspect these elements and turn off different styles to get a feel for what they are doing. These styles are not applied without the navbar

这篇关于什么是Bootstrap下拉菜单三角形的神秘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！