Bootstrap 添加下拉插入符号

Question

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

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

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

Answer 1

您可以在 bootstrap 中使用 Popover 功能

Found Docu here

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

Answer 2

如果您在导航栏中使用下拉菜单，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: '';
}

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

希望这会有所帮助！