twitter-bootstrap Bootstrap 添加下拉插入符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16738452/
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 adding a dropdown caret
提问by Henry Cho
http://i.imgur.com/gvNOQ7p.png
http://i.imgur.com/gvNOQ7p.png
As indicated above, I want to learn to make a dropdown menu with the "dropdown-caret" (circled green in the image).
I viewed source of twitter and it seems that they have it as <li class="dropdown-caret"></li>, but I couldn't produce it using the Bootstrap.
Is this not included in the bootstrap, or am I doing it wrongly?
如上所述，我想学习使用“下拉插入符”（图中绿色圆圈）制作下拉菜单。我查看了 twitter 的来源，似乎他们将其作为<li class="dropdown-caret"></li>，但我无法使用 Bootstrap 生成它。这不包含在引导程序中，还是我做错了？
In addition, how do I align the dropdown menu to left instead of the default right? As shown in the image, the dropdown menu is aligned to left.
另外，如何将下拉菜单左对齐而不是默认右对齐？如图所示，下拉菜单向左对齐。
回答by cortex
Twitter bootstrap adds the caret by default if you are using dropdowns within a navigation bar. These are the CSS rules:
如果您在导航栏中使用下拉菜单，Twitter 引导程序会默认添加插入符号。这些是 CSS 规则：
.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: '';
}
So make sure you have this DOM structure or copy the style.
所以确保你有这个 DOM 结构或复制样式。
Hope this helps!
希望这可以帮助！
回答by zeyorama
You can use the Popover functionality in bootstrap
您可以在引导程序中使用 Popover 功能
Here you can see, how it works.
在这里你可以看到，它是如何工作的。
