删除 React Bootstrap 中的下拉箭头

问题描述 投票:0回答:2

我正在尝试使用以下 css 删除下拉箭头,但它没有产生任何效果。

enter image description here

.dropdown::after{
  display: none !important; 
}

这是代码

<NavDropdown className={classes.user} title="Componentes" id="collasible-nav-dropdown">
   <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
   <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
   <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
   <NavDropdown.Divider />
   <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
css reactjs bootstrap-4 react-bootstrap
2个回答
18
投票

这是 Bootstrap 下拉箭头中的 CSS:
enter image description here

因此,为了覆盖它,您需要使用相应的 CSS 选择器:

.dropdown-toggle::after {
  display: none !important; 
}

请注意,也许不需要包含

!important


0
投票

不确定这是否已解决,我在选择下拉菜单时遇到了类似的问题,结果发现插入符号/箭头是背景图像,您可以将其设置为 CSS 中的背景图像:无来删除它。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.