Question

我试图找出如何将样式应用于反应引导程序NavBar。在这里添加了jsfiddle。 https://jsfiddle.net/pdqzju1e/1/ 在使用react-bootstrap运行jsfiddle时遇到一些问题。适用于我当地设置的环境。

const navbar = {backgroundColor: '#F16E10'};
export default class NavigationBar extends React.Component {
  render() {
    return (
      <div>
        <Navbar style={navbar}>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="/">Test App</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav style={navbar}>
              <NavItem eventKey={1} href="#">Link1</NavItem>
              <NavItem eventKey={2} href="#">Link2</NavItem>
            </Nav>
            <Nav pullRight>
              <NavItem eventKey={1} href="#">Link3</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

以上似乎只适用于Nav组件，而不适用于NavBar。有没有解决方法呢？

Answer 1

对我来说，问题是背景图像被设置为一个bootstraps样式表中的线性渐变。背景图像优先于背景颜色。覆盖使用以下内容对我有用：

/* override bootstrap navbar colors */
.navbar,
.navbar-default {
    background-image: linear-gradient(to bottom,#2c4053 0,#2c4053 100%) !important; /* override background image gradient w/ flat color */
}

我相信这也应该有用，但它不适合我。

.navbar,
.navbar-default {
    background-image: none !important;
}

我确定有更好的方法可以实现这一点......

Answer 2

Hey Akshay你可以定位checkfiles()类来覆盖它的css属性。 Here's a jsBin demo

navbar-header

如果这对您有所帮助，那么我建议您使用Chrome的devtools：检查元素并更改其样式以查看您想要定位的css类。

Answer 3

您可以在此处更改MenuItem或NavItem的颜色

 .navbar-default .navbar-nav > li > a {
      color: white;
    }

基本技巧是开发工具并检查css属性，你可以做任何事情。

反应bootstrap导航栏样式

3 个答案: