Question

我希望我的导航仪在单击或不单击时看起来像下面的图片：

但是，单击时看起来像这样：

我尝试了多种方法来实现navitem标记的css属性，以获取与其导航栏类似的背景，但未成功。以下是我的React代码和相关的CSS实现：

//React Code:

      <div className="App">
        <Navbar fluid collapseOnSelect fixedTop>
          <Navbar.Header>
            <Navbar.Brand>
             <img src={store_logo} alt="logo" height="70" width="75"/>
              <Link to="/"><p>StoreName</p></Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              {this.state.isAuthenticated
                ? <Fragment>
                    <LinkContainer to="/settings">
                      <NavItem>Settings</NavItem>
                    </LinkContainer>
                    <NavItem onClick={this.handleLogout}>Logout</NavItem>
                  </Fragment>
                : <Fragment>
                    <IndexLinkContainer exact to="/about">
                    <NavItem eventKey={1}>About</NavItem>
                    </IndexLinkContainer>
                    <LinkContainer to="/contact">
                      <NavItem eventKey={2}>Contact</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/blog">
                      <NavItem>Blog</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/signup">
                      <NavItem>Signup</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/login">
                      <NavItem>Login</NavItem>
                    </LinkContainer>
                  </Fragment>
              }
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        </div>

//CSS Code:

.App .navbar-brand,
.App .navbar-brand p {
  color: black;
  font-weight: bold;
}

.App .nav {
  font-weight: bold;
  padding-top: 30px;
}

.navbar-default .navbar-nav > li > a {
     color: black;
     background-color: yellow;
     border-color: green;
     background-image: none;
   }

.App nav.navbar.navbar-default.navbar-fixed-top {
    border-color: green;
    background-color: yellow;
    height: 120px;
    color: black;
}

任何关于我可能做错事情的想法/帮助都会被感激。谢谢

Answer 1

当您使用CSS框架并想要重新定义样式时，您需要覆盖框架提供的原始样式。

如果您查看original CSS（搜索.navbar-default .navbar-navnavbar-nav），则可以看到

.navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}

要覆盖所有这些内容，您可以放

.navbar-default .navbar-nav,
.navbar-default .navbar-nav > li > a {
  color: black;
  background-color: yellow;
  border-color: green;
  background-image: none;
}

希望这会有所帮助。

使NavItem背景颜色与NavBar

1 个答案: