Question

所以我正在使用reactjs（非本机）处理项目，并且我在react-bootstrap中遇到了css问题。当使用具有反向和流畅样式的Navbar组件时，我会得到一个小的底部边框。它不仅仅是因为，当我使用PageHeader组件时也是如此。我已尝试对.navbar / .navbar-header / .navbar-default进行各种css更改，例如＆＃34; border-bottom：none！important;＆＃34; ＆＃34; border-radius：0;＆＃34;没有人成功。我可以编辑其他东西，比如背景颜色..谢谢

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（调用导航组件的地方）（App类的代码片段）

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

App.css（navbar css attempt snippet）

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

Answer 1

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

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

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

1 个答案: