Bootstrap添加下拉插入符号

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结构或复制样式.

希望这可以帮助!