jquery - 将箭头添加到 twitter bootstrap 的下拉药丸？

Question

我让 twitter 引导下拉按钮成功工作，但我有一个小问题。这里的黑色导航栏：

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>

Answer 3

不确定药丸是什么，但如果您有引导程序，只需将其放在代码中的任何位置即可添加箭头。

<b class="caret"></b>

这是你的意思吗？

Answer 4

这对我来说是工作

---

    //css
        .arrow-right > .dropdown-menu:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        position: absolute;
        top: -6px;
        right: 10px;
        }

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

    // html

//for left side dropdown menu

    <div class="dropdown arrow-left">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
    </div>


//for right side dropdown menu

    <div class="dropdown pull-right arrow-right">
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
    </div>