bootstrap 删除下拉菜单中的向上箭头答案

【问题标题】：bootstrap remove upward arrow in dropdownbootstrap 删除下拉菜单中的向上箭头
【发布时间】：2013-07-05 18:42:35
【问题描述】：

我正在使用 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;
}

【问题讨论】：

我找不到对您在问题中的标记的引用。
我已经添加了我在 bootstrap.css 中可以找到的内容

标签： css twitter-bootstrap

【解决方案1】：

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

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

使用这种方法，您甚至可以只覆盖特定的下拉菜单。例如，如果您的下拉列表是 ID 为 my_dropdown 的元素的子元素，您可以这样做：

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

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

【讨论】：

抱歉这个没有去掉向上的箭头
然而白色箭头消失了，但似乎还有一个黑暗的版本仍然存在一半不透明度
我也必须这样做，谢谢 .navbar .nav > li > .dropdown-menu:before { border-bottom: none; }

【解决方案2】：

以下 css 对我有用：

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

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

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

【讨论】：

是的，这是正确的解决方法，对我有用，谢谢！

【解决方案3】：

你也可以这样做：

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

这将禁用箭头及其阴影。

【讨论】：