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

Question

这个问题在这里已有答案：

Cannot apply any Bootstrap style in using React-bootstrap library 1回答

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

去react-bootsrap getting started tab

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

Answer 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）。

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2