我正在 Node 应用程序上使用 Bootstrap 4 的 Reactstrap 实现,并尝试使用以下 JSX 渲染导航栏组件:
return (
<Navbar color="inverse" inverse toggleable={`md`} fixed={`top`} className="h-50">
<NavbarToggler right onClick={this.toggle} />
<NavbarBrand href="/">reactstrap</NavbarBrand>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
);
但是当组件渲染时,它完全跳过我添加的类 (h-50
):
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">...</nav>
Reactstrap documentation给出了可以用于大多数常规类的 Prop 列表,例如 navbar-inverse
、navbar-faded
等,但没有一个适用于像我这样的自定义类。有什么建议吗?
最佳答案
只需将 className
的值放入 { ... }
中,如下所示:
<Navbar color="inverse" inverse toggleable={`md`} fixed={`top`}
className={"h-50"}>
...
</Navbar>
关于bootstrap-4 - 无法在 Reactstrap Navbar 组件中使用 Bootstrap 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45268378/