react-bootstrap 导航栏无法正确呈现[重复]答案

【问题标题】：react-bootstrap navbar not rendering correctly [duplicate]react-bootstrap 导航栏无法正确呈现[重复]
【发布时间】：2018-04-29 14:31:29
【问题描述】：

我正在尝试使用 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;

【问题讨论】：

您的项目中好像没有导入 bootstrap.css
你使用 npm 安装了react-bootstrap 吗？
是的，我确实通过 npm 安装了 react-bootstrap

标签： reactjs navbar react-bootstrap

【解决方案1】：

转到react-bootsrap getting started tab

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

【讨论】：

【解决方案2】：

很明显你还没有导入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）。

【讨论】：