如何删除 react-bootstrap 导航栏组件中的底部边框？

Question

所以我正在使用reactjs（非本机）开发一个项目，并且我遇到了react-bootstrap的css问题。 当使用具有反向和流畅样式的导航栏组件时，我得到了一个小的底部边框。 这不仅是因为，当我使用 PageHeader 组件时也是如此。 我尝试了各种 css 更改为 .navbar/.navbar-header/.navbar-default，例如“border-bottom: none;important:” “border-radius; 0”。 没有一个成功。 我可以编辑其他的东西，比如背景颜色。。谢谢

Navigation.js（这部分代码显示了经过身份验证的用户的导航栏选项）

const NavigationAuth = () =>
<div>
    <Navbar inverse fluid>
        <Navbar.Header>
            <Navbar.Brand>
                <a href="/"> Bug Tracker </a>
            </Navbar.Brand>
        </Navbar.Header>
        <Nav pullRight>
            <NavItem eventKey={1} href={routes.LANDING}>Landing</NavItem>
            <NavItem eventKey={2} href={routes.HOME}>Home</NavItem>
            <NavItem eventKey={3} href={routes.ACCOUNT}>Account</NavItem>
            <NavItem>
                <SignOutButton />
            </NavItem>
        </Nav>
    </Navbar>
</div>

App.js（调用导航组件的地方）（class App 的代码片段）

render() {
return (
  <Router>
    <div>
      <header>
        <Navigation />
        <hr />
        <Route
          exact path={routes.LANDING}
          component={() => <LandingPage />}
        />

App.css（导航栏 css 尝试片段）

.navbar-header {
   border-bottom: none;
}

Answer 1

您的边框来自具有.navbar.navbar-default类的Navbar组件，因此您需要从该类中删除边框

.navbar.navbar-default {
  border-bottom: 0;
}

Answer 2

试试这个 className="border-0"