bootstrap删除下拉列表中的向上箭头

Question

我正在使用Twitter bootstap,并希望删除下拉菜单上的向上箭头,在我的导航中.我在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;
}

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

(刚决定添加这个,以防有人在以后寻找答案,因为接受的答案对我不起作用.)