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>

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>

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

4 个答案: