如何刪除 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"