小编Jos*_*las的帖子

React-Bootstrap NavBar没有获得正确的样式

我刚刚开始学习react-bootstrap,但在获取NavBar组件以正确呈现时遇到了一个问题。首先,我复制了在https://react-bootstrap.github.io/components/navbar/上找到的基本导航栏的代码,但以下内容是我得到的。

如此处所示: navbar-component

据我所知,我已经准备就绪,包括index.html头中的css以及将webpack与css-loader一起使用。显然我缺少了一些东西,需要帮助!

Navigation.js

import React from 'react';
import { NavLink } from 'react-router-dom';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react- 
bootstrap';

    const Navigation = () => ( 
    <div>
    <Navbar>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="#home">React-Bootstrap</a>
        </Navbar.Brand>
      </Navbar.Header>
      <Nav>
        <NavItem eventKey={1} href="#">
          Link
        </NavItem>
        <NavItem eventKey={2} href="#">
          Link
        </NavItem>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.4}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar>
  </div>
);

export default Navigation; …
Run Code Online (Sandbox Code Playgroud)

reactjs react-bootstrap bootstrap-4

2
推荐指数
1
解决办法
1986
查看次数

标签 统计

bootstrap-4 ×1

react-bootstrap ×1

reactjs ×1