Question

我正在尝试了解Twitter Bootstrap下拉菜单与导航栏中包含的内容之间的区别以及它们不包含在内的区别。

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

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

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

有什么想法吗？

Answer 1

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

时不会应用这些样式

Answer 2

只需将其添加到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;
}

Answer 3

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

    <b class="caret dropdown-toggle"></b>

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

3 个答案: