Bootstrap移除下拉菜单中的向上箭头

Question

我正在使用Twitter Bootstrap，希望在我的导航栏中的下拉菜单中删除向上箭头。但我在bootstrap.css中找不到相关的参考。

.navbar .dropdown-menu:after {
 content: '';
 display: inline-block;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #000; /* change color here, modified for a black arrow */
 position: absolute;
 top: -6px;
 left: 10px;
}

- Keith Power

---

我找不到你在问题中提到的标记参考。 - Shef

我已经添加了我可以在bootstrap.css中找到的内容。 - Keith Power

Answer 1

我不建议你编辑 bootstrap.css 文件。你可以在自定义样式表中覆盖该组件的样式以隐藏箭头，如下所示：

.dropdown-menu:after {
    border: none !important;
    content: "" !important;
}

使用这种方法，您甚至可以仅覆盖特定下拉菜单。例如，如果您的下拉菜单是一个具有id my_dropdown的元素的子元素，您可以执行以下操作：

#my_dropdown .dropdown-menu:after {
    border: none !important;
    content: "" !important;
}

这将允许您在其他下拉菜单中使用箭头，同时在此特定下拉菜单中隐藏它。

- Shef

---

抱歉，这不能去掉向上箭头。 - Keith Power

白色箭头已经消失，但似乎仍有一个半透明的黑色版本保留。 - Keith Power

我也必须这样做，谢谢。.navbar .nav > li > .dropdown-menu:before { border-bottom: none; } - Keith Power

Answer 2

以下CSS对我有效：

```css

以下CSS对我有效：

```

.dropdown-menu:before, 
.dropdown-menu:after {
     border: none !important;
     content: none !important;
}

如果您删除其中的任何一个选择器，箭头中的某些细节仍将保留 - 无论是灰色三角形还是白色三角形。

（只是决定添加这个内容，以防有人稍后寻找答案，因为已接受的答案对我不起作用。）

- June Pecherska

---

是的，这是正确的修复方法，对我有用，谢谢！ - mikhail-t

Answer 3

您还可以进行以下操作：

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

这将禁用箭头及其阴影。

- Vidal Quevedo