将箭头添加到Twitter Bootstrap的下拉标签？

Question

我已经成功地使 Twitter Bootstrap 下拉按钮正常工作，但是我有一个小问题。这里的黑色导航栏：

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

当下拉菜单打开时，它有一个很棒的小箭头，对吧？好吧，我正在使用紧挨着它的 pills（指 Bootstrap 中的一种导航），但它们没有那个箭头。似乎只有在使用导航栏时才会包含箭头，而我不需要。

有人发现了一种方法可以将箭头添加到 pills 吗？:(

- user1227914

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部分，并进行修改以适应您的代码。

- Jason Towne

---

太好了！谢谢 :) 我只是创建了一个副本，删除了 .navbar 然后它就可以工作了！！！ - user1227914

这个代码可以工作，但箭头周围的边框没有显示出来。你有什么想法应该怎么做？ - Anthony

@Anthony 这是因为您还需要包括 ::before 样式，它实际上创建了箭头周围的边框。 :) 请参阅此页面上的其他答案。坦率地说，这个被接受的答案并不是最好的。 - Jan Peša

关于以上两个评论，提供一条信息：箭头可能无法显示出来，因为它是白色的，而背景（即下拉菜单和页面）也可能是白色的。将上面的 white 改成 black 或其他颜色，就可以看到它了。 - dan

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>

- Umar Farooq Khawaja

Answer 3

不确定这些药丸是什么，但如果你使用的是Bootstrap，只需在代码中任意位置插入以下内容即可添加箭头。

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

这是您想表达的意思吗？

- Mark Pieszak - Trilon.io

---

是的，那个向下箭头我已经弄清楚了，但问题是向上的箭头看起来像一个倒置的“v”，从菜单中打开，指向上面的链接。 - user1227914

这些是使用::before创建的（这是CSS3），因此取决于您使用的浏览器，它可能会显示或不显示 :/ - Mark Pieszak - Trilon.io

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>

- harry34