如何在React Bootstrap中移除下拉导航项中的插入符号？

Question

我一直在尝试使用Bootstrap 4和React从NavDropdown组件中移除插入符号(caret)，但是一直没有成功。以下是我的React和CSS代码，不确定出了什么问题。谢谢。

<Navbar expand="lg">
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
          <NavDropdown title="ENGAGEMENT" id="basic-nav-dropdown" show={false} className="noCaret">
              <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>
          </Nav>
        </Navbar.Collapse> 
</Navbar>

.caret {
  display: none !important;
}

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

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

- nisha

Answer 1

您可以使用id来禁用插入符号。

 #dropdown-basic::after{
      display: none; 
   }

- Ryuzaki L

Answer 2

这适用于我，使用默认的bootstrap类。

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

- user2809286