Question

我正在尝试使用react-bootstrap创建一个导航栏，但是当我渲染它时，我得到了这个：

我没有收到任何错误消息，我找不到任何解释我所得到的文件，但显然我做错了。有什么想法吗？

这是我正在使用的代码：

import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap/lib/';

const Toolbar = () => {
  return (
    <Navbar staticTop collapseOnSelect>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="test">Brandname Goes Here</a>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav>
          <NavItem eventKey={1}>Contact Us</NavItem>
          <NavItem eventKey={2}>About Us</NavItem>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

export default Toolbar;

Answer 1

很明显，您尚未导入bootstrap.min.css。将其导入index.html，如下所示。

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>

我不建议使用类似import 'react-bootstrap/*/*.css'的东西，因为我不确定您使用的是哪个框架和哪些加载器（例如：webpack）。

Answer 2

转到react-bootsrap getting started tab

并将说明下的链接复制到您的index.html <head>标记中，如果您使用react-bootstrap安装了npm，则可以导入像这样的导航栏： import { Navbar, Nav, NavItem } from 'react-bootstrap';

react-bootstrap导航栏无法正确渲染

2 个答案: