CSS 下拉菜单上的引导程序 3 箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19983995/
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
bootstrap 3 arrow on dropdown menu
提问by user2993108
In bootstrap 2 the dropdown menu had an upwards arrow as it can be seen here(i am not talking about the carret). Now using bootstrap 3 or latest git this arrow doesn't exist in my simple example bellow nor in the exampleson the bootstrap homepage.
在引导程序 2 中，下拉菜单有一个向上的箭头，可以在这里看到 （我不是在谈论 carret）。现在使用 bootstrap 3 或最新的 git 这个箭头在我下面的简单示例和bootstrap 主页上的示例中都不存在。
How can I add this arrow again using bootstrap 3?
如何使用引导程序 3 再次添加此箭头？
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
</ul>
</li>
PS:To be precise the picture can be seen in anotherstackoverflow article.
PS：准确的图片可以在另一篇stackoverflow文章中看到。
回答by Alexander Mistakidis
You need to add :after and :before css rules to your dropdown-menu. These rules are taken from Bootstrap 2, and are what draw the triangle above the dropdown.
您需要将 :after 和 :before css 规则添加到您的dropdown-menu. 这些规则取自 Bootstrap 2，用于在下拉列表上方绘制三角形。
.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 #ffffff;
border-left: 6px solid transparent;
content: '';
}
Confused how? See here for an animation that explains css triangles
迷茫怎么办？在这里查看解释 css 三角形的动画
回答by Joyrex
Just to follow up on this - if you want the arrow to position itself correctly (like when using it on a navbar element that is right-aligned, you need the following additional CSS to ensure the arrow is right-aligned:
只是为了跟进 - 如果您希望箭头正确定位（例如在右对齐的导航栏元素上使用它时，您需要以下附加 CSS 以确保箭头右对齐：
.navbar .navbar-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.navbar-right:before {
right: 12px; left: auto;
}
.navbar .navbar-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.navbar-right:after {
right: 13px; left: auto;
}
Note the "navbar-right" - that was introduced in BS3 instead of pull-right for navbars.
请注意“navbar-right” - 它是在 BS3 中引入的，而不是用于导航栏的向右拉。
回答by Dan
The CSS that Alexander Mistakidis provided is correct. Which is to say, it creates the arrow atop the dropdown menu in Bootstrap. In order to position it correctly in a responsive view (@user2993108), you can change the leftattribute for each of the class selectors (.dropdown-menu:before,.dropdown-menu:after) at different media queries or breakpoints.
Alexander Mistakidis 提供的 CSS 是正确的。也就是说，它会在 Bootstrap 的下拉菜单顶部创建箭头。为了在响应式视图 (@user2993108) 中正确定位它，您可以在不同的媒体查询或断点处更改left每个类选择器 ( .dropdown-menu:before, .dropdown-menu:after)的属性。
For example...
例如...
@media (max-width: 400px) {
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 30px; /* change for positioning */
...
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 31px; /* change for positioning */
...
}
}
@media (max-width: 767px) and (min-width: 401px) {
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 38px; /* change for positioning */
...
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 39px; /* change for positioning */
...
}
}
and so on...
等等...
回答by Lucas Nelson
This builds on the work by Alexander Mistakidis and Joyrex to support optional arrows and dropup menus. In my case I did not want to have an arrow on allof the dropdown menus, only some.
这建立在 Alexander Mistakidis 和 Joyrex 的工作之上，以支持可选的箭头和下拉菜单。就我而言，我不想在所有下拉菜单上都有一个箭头，只有一些。
With this, you add the arrowclass to the dropdown-menuelement to get the arrow. If Bootstrap is positioning the dropdown/dropup to the left, also add arrow-rightto shift the arrow to the other side.
有了这个，您将arrow类添加到dropdown-menu元素以获取箭头。如果 Bootstrap 将下拉菜单/下拉菜单定位在左侧，还添加arrow-right将箭头移到另一侧。
// add an arrow to the dropdown menus
.dropdown-menu.arrow:before {
position: absolute;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
content: '';
}
.dropdown-menu.arrow:after {
position: absolute;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: '';
}
// postion at the top for a 'down' menu
.dropdown .dropdown-menu.arrow:before {
top: -7px;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
}
.dropdown .dropdown-menu.arrow:after {
top: -6px;
border-bottom: 6px solid #ffffff;
}
// postion at the bottom for an 'up' menu
.dropup .dropdown-menu.arrow:before {
bottom: -7px;
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
}
.dropup .dropdown-menu.arrow:after {
bottom: -6px;
border-top: 6px solid #ffffff;
}
// support to move the arrow to the right-hand-side
.dropdown-menu.arrow.arrow-right:before,
.dropup .dropdown-menu.arrow.arrow-right:before {
right: 15px;
left: auto;
}
.dropdown-menu.arrow.arrow-right:after,
.dropup .dropdown-menu.arrow.arrow-right:after {
right: 16px;
left: auto;
}
