Question

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

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

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

Answer 1

如果您在导航栏中使用下拉列表，则默认情况下，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结构或复制样式。

希望这有帮助！

Answer 2

您可以在bootstrap中使用Popover功能

Found Docu here

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

Bootstrap添加下拉插入符号

2 个答案: