twitter-bootstrap Bootstrap 下拉菜单三角形的奥秘是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14051269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the mystery of the Bootstrap dropdown menu triangle?
提问by Max
I'm trying to understand the difference between Twitter Bootstrap dropdown menus when they are included within a navbar and when they are not.
我试图了解 Twitter Bootstrap 下拉菜单包含在导航栏中和不包含在导航栏中时的区别。
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
http://twitter.github.com/bootstrap/javascript.html#dropdowns
I just spent two hours exploring the css/html, I still don't understand WHY...
我刚刚花了两个小时探索 css/html，我还是不明白为什么......
Any idea ?
任何的想法 ？
回答by Devender
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
他们在彼此的顶部创建了两个三角形，一个浅灰色，另一个深灰色。如果您使用 Chrome 开发人员工具，您可以检查这些元素并关闭不同的样式以了解它们在做什么。如果没有导航栏，这些样式将不会应用
回答by user1467439
Just add this to the CSS and you will be able to use dropdown menu arrow without placing the dropdown inside a nav bar
只需将其添加到 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;
}
回答by Rajarshi
The triangle can be generated by the following syntax:
三角形可以通过以下语法生成：
<b class="caret dropdown-toggle"></b>
