jQuery 将箭头添加到 twitter bootstrap 的下拉菜单中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11633463/
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
adding the arrow to dropdown pills for twitter bootstrap?
提问by user1227914
I got the twitter bootstrap dropdown buttons successfully working, but I have a tiny problem. The black navbar here:
我让 twitter bootstrap 下拉按钮成功工作，但我有一个小问题。这里的黑色导航栏：
http://twitter.github.com/bootstrap/javascript.html#dropdowns
http://twitter.github.com/bootstrap/javascript.html#dropdowns
It has a neat little arrow when the dropdown opens, right? Well, I'm using the pills right below and they don't have that arrow. It seems the arrow is only included when using the navbar, which I don't need.
当下拉菜单打开时，它有一个整洁的小箭头，对吗？嗯，我正在使用下面的药丸，他们没有那个箭头。似乎箭头仅在使用导航栏时才包含，我不需要。
Has anyone figured out a way to add the arrows to the pills? :(
有没有人想出一种将箭头添加到药丸的方法？:(
回答by Jason Towne
Assuming you're referring to the white arrow that points upward when a menu item is clicked, the style you're looking for is on line 3907 in bootstrap.css:
假设您指的是单击菜单项时指向上方的白色箭头，则您要查找的样式位于 bootstrap.css 中的第 3907 行：
.navbar .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: '';
}
You can try copying this style and removing the .navbarportion of the style declaration and modify it to fit your code.
您可以尝试复制此样式并删除.navbar样式声明的部分并修改它以适合您的代码。
回答by Umar Farooq Khawaja
Here's a refinement to Jason Towne's answer.
这是对 Jason Towne 的回答的改进。
This works correctly if the menu has been pulled to the right.
如果菜单被拉到右边，这将正常工作。
.dropdown-menu-arrow::before {
border-bottom: 7px solid rgba(0, 0, 0, 0.2);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: inline-block;
left: 9px;
position: absolute;
top: -7px;
}
.dropdown-menu-arrow::after {
border-bottom: 6px solid #FFFFFF;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
display: inline-block;
left: 10px;
position: absolute;
top: -6px;
}
.btn-group.pull-right > .dropdown-menu-arrow::before {
left: inherit;
right: 9px;
}
.btn-group.pull-right > .dropdown-menu-arrow::after {
left: inherit;
right: 10px;
}
Here's an example of usage.
这是一个使用示例。
<div class="btn-group pull-right">
<a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-arrow">
<li>...</li>
</ul>
</div>
回答by Mark Pieszak - Trilon.io
Not sure what the pills are, but if you have bootstrap you add the arrows by simply putting this anywhere in your code.
不确定药丸是什么，但如果您有引导程序，您只需将其放在代码中的任何位置即可添加箭头。
<b class="caret"></b>
Is that what you meant?
这是你的意思吗？
回答by harry34
This is work for me
这对我来说是工作
//css
.arrow-right > .dropdown-menu:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
right: 10px;
}
.arrow-left > .dropdown-menu:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 10px;
}
// html
//for left side dropdown menu
<div class="dropdown arrow-left">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
//for right side dropdown menu
<div class="dropdown pull-right arrow-right">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
