将箭头添加到 twitter bootstrap 的下拉药丸？答案

【问题标题】：adding the arrow to dropdown pills for twitter bootstrap?将箭头添加到 twitter bootstrap 的下拉药丸？
【发布时间】：2012-07-22 22:11:09
【问题描述】：

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

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

当下拉菜单打开时，它有一个整洁的小箭头，对吧？好吧，我正在使用下面的药丸，他们没有那个箭头。似乎只有在使用导航栏时才包含箭头，我不需要。

有没有人想出在药丸中添加箭头的方法？ :(

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案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 部分并对其进行修改以适合您的代码。

【讨论】：

这太完美了！谢谢 :) 我只是创建了一个副本，删除了 .navbar 但它不起作用！！！
这可行，但箭头周围的边框未显示。有什么想法我应该怎么做？
@Anthony 这是因为您还需要包含 ::before 样式，它实际上创建了箭头周围的边框。 :) 在此页面上查看其他一些答案。坦率地说，这个被接受的并不是最好的。
只是关于上述两个 cmets 的仅供参考：箭头可能不会显示，因为它是白色的，并且背景（即您的下拉菜单和页面）也可能是白色的。将上面的white 更改为black 或其他颜色，然后它应该是可见的。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

这是你的意思吗？

【讨论】：

是的，这是向下的箭头，我想出了一个，但问题是向上的箭头看起来像一个倒“v”的菜单，然后打开，指向上面的链接。
这些是用 ::before （即 css3）创建的，因此取决于您使用的浏览器，它会显示或不会显示：/

【解决方案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>

【讨论】：