bootstrap在下拉列表中删除向上箭头 [英] bootstrap remove upward arrow in dropdown

问题描述

我使用Twitter的启动程序，并希望删除向下箭头在下拉菜单whis是在我的导航。我在bootstrap.css中找不到引用。

I am using Twitter bootstap and wish to remove the upward arrow on the dropdown-menu whis is in my nav. I cannot find a reference in the 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 文件。您可以覆盖自定义样式表中的样式以隐藏该组件的箭头，如下所示：

I would not recommend you to edit the bootstrap.css file. You can overwrite the styling in your custom stylesheet to hide the arrow for that component like this:

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

使用此方法，您甚至可以只覆盖特定的下拉菜单。例如，如果您的下拉列表是具有 my_dropdown 的元素的子级，则可以执行以下操作：

With this method you can even do the overwriting for a specific dropdown only. For example, if your dropdown was a child of an element with the id my_dropdown, you could do:

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

这将允许你有一个箭头为其他下拉列表，此特定下拉菜单。

This would allow you to have an arrow for other dropdowns, while hiding it for this specific dropdown.

这篇关于bootstrap在下拉列表中删除向上箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！