css - bootstrap 删除下拉菜单中的向上箭头

Question

我正在使用 Twitter 引导程序，并希望删除下拉菜单上的向上箭头，这在我的导航中。我在 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;
}

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

这将允许您为其他下拉菜单设置一个箭头，同时为该特定下拉菜单隐藏它。

Answer 2

以下css对我有用：

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

如果删除两个选择器中的任何一个，箭头中的一些细节仍然会保留 - 灰色或白色三角形。

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

Answer 3

你也可以这样做：

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

这将禁用箭头及其阴影。