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

我的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; } 

这是一个使用示例。

 
  Actions   
 
...
 
  

Answer 3

不确定是什么药，但如果你有自举，你只需将它放在代码中的任何位置即可添加箭头。

这是你的意思吗？

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 
 Dropdown trigger 
 ... 
 
 //for right side dropdown menu 
  Dropdown   
 ...