将箭头添加到twitter bootstrap的下拉药片中？

Question

我的twitter bootstrap下拉按钮成功运行,但我有一个小问题.这里的黑色导航栏:

http://twitter.github.com/bootstrap/javascript.html#dropdowns

当下拉列表打开时,它有一个整齐的小箭头,对吧？好吧,我正在使用下面的药片,他们没有那个箭头.似乎箭头仅在使用导航栏时包含,我不需要.

有没有人想出一种方法来添加箭头到药丸？:(

Answer 1

假设您在单击菜单项时指的是向上指向的白色箭头,那么您正在寻找的样式位于bootstrap.css中的3907行:

.navbar .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: '';
}

您可以尝试复制此样式并删除.navbar样式声明的部分并修改它以适合您的代码.

Answer 2

这是对Jason Towne答案的改进.

如果菜单已拉到右侧,则此操作正常.

.dropdown-menu-arrow::before {
    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    display: inline-block;
    left: 9px;
    position: absolute;
    top: -7px;
}

.dropdown-menu-arrow::after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    left: 10px;
    position: absolute;
    top: -6px;
}

.btn-group.pull-right > .dropdown-menu-arrow::before {
    left: inherit;
    right: 9px;
}

.btn-group.pull-right > .dropdown-menu-arrow::after {
    left: inherit;
    right: 10px;
}

这是一个使用示例.

<div class="btn-group pull-right">
    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
    Actions
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu dropdown-menu-arrow">
        <li>...</li>
    </ul>
</div>