移除Bootstrap下拉菜单的小三角箭头

Question

我正在使用Bootstrap制作个人网站，导航菜单有一个小三角标志，你可以在http://portfolio.tomvervoort.net中看到。

“Portfolio”旁边的三角标志没有问题，但是当你点击“Portfolio”时，下拉菜单上方也会出现白色三角标志。 有人知道如何删除这一个吗？

- Tom

Answer 1

您的插入符号位于.dropdown-menu:after内。因此，请按照以下方式编写：

.navbar .dropdown-menu:after{
 display:none;
}

- sandeep

---

在最新版本的TBS中，您还需要添加：.navbar .dropdown-menu:before{ display:none; }。请查看我的答案获取完整代码。 - technoTarek

Answer 2

我在Rails（使用Twitter Bootstrap Rails gem）中遇到了同样的问题，解决方法略有不同。

.navbar .nav > li > .dropdown-menu::after, 
.navbar .nav > li > .dropdown-menu::before {
  display:none;
}

- CJ.

Answer 3

在当前版本的TBS（v2.2.1）中，您还需要像这样针对:before伪选择器进行定位：

.navbar .dropdown-menu:after, .navbar .dropdown-menu:before {
    display:none;
}

- technoTarek

Answer 4

尝试这样做：

.navbar .nav > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu:after {
    display:none;
}

对我来说很好用。:-)

- Alex

Answer 5

来自 git hub 的 post 现在我们可以直接使用 noCaret 属性。这篇文章基本上是关于 DropDownButton，但它也适用于 NAvButton。

- LowCool

Answer 6

尝试了几个解决方案并尝试遵循正确的类引用，可以使用快速修复，但如果可能，请嵌套它以使其不影响其他全局a标签：

a::after {
    content: none !important;
}

- elarcoiris