twitter-bootstrap - Bootstrap 添加下拉插入符号

Question

http://i.imgur.com/gvNOQ7p.png

如上所述，我想学习使用“dropdown-caret”（图中绿色圆圈）制作一个下拉菜单。我查看了 twitter 的来源，似乎他们有它<li class="dropdown-caret"></li>，但我无法使用 Bootstrap 生成它。这不包含在引导程序中，还是我做错了？

另外，如何将下拉菜单左对齐而不是默认右对齐？如图所示，下拉菜单左对齐。

Answer 1

如果您在导航栏中使用下拉菜单，Twitter bootstrap 默认会添加插入符号。这些是 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: '';
}

所以确保你有这个 DOM 结构或复制样式。

希望这可以帮助！

Answer 2

您可以在引导程序中使用 Popover 功能

在这里找到文档

在这里你可以看到它是如何工作的。