15

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 ?

4

3 回答 3

25

在 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 开发人员工具，您可以检查这些元素并关闭不同的样式以了解它们在做什么。没有导航栏就不会应用这些样式

于 2012-12-27T08:24:34.177 回答
4

只需将其添加到 CSS 中，您就可以使用下拉菜单箭头，而无需将下拉菜单放在导航栏中

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

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

.dropdown-menu:before, .dropdown-menu.pull-right:before {
right: 12px;
left: auto;
}

.dropdown-menu::after, .dropdown-menu.pull-right:after {
right: 13px;
left: auto;
}
于 2013-07-08T15:29:25.100 回答
1

三角形可以通过以下语法生成：

    <b class="caret dropdown-toggle"></b>
于 2012-12-27T10:00:55.653 回答