Bootstrap停止使用React

Question

昨天我的应用程序运行良好，直到今天。我有一个Bootstrap的反应应用程序。今天我刷新了我的应用程序，所有带Bootstrap的CSS都停止了工作。

在我的package.json中是＆＃34; react-bootstrap＆＃34;：＆＃34; ^ 0.31.5＆＃34;，我还在index.html中添加了一个指向脚本的链接：

  <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

例如，我添加了以下代码：

import { Navbar , Nav , Button , NavItem  } from "react-bootstrap";
import './../css/styles.css';

<Navbar>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#">React-Bootstrap</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">Link 1</NavItem>
      <NavItem eventKey={2} href="#">Link 2</NavItem>
    </Nav>
    <Navbar.Form pullLeft>
      {' '}
      <Button type="submit">Submit</Button>
    </Navbar.Form>
  </Navbar.Collapse>
</Navbar>

在我的应用程序中看起来像这样：

GLyphicon也不是这样的：

 <Glyphicon glyph="align-left" />

当我点击导航栏中的这个小按钮时，只显示菜单1秒并将其放下。

你有什么解决方案来解决这个问题吗？

Answer 1

如果您正在加载：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

这意味着您正在加载Bootstrap 4.0.0，因为这是最新的。

因为Bootstrap 4与Bootstrap 3完全不兼容，会破坏你的布局。

解决方案：

加载bootstrap 3的css（以及相应的js）文件或迁移到Bootstrap 4.

但是，迁移到Bootstrap 4需要您手动调整Bootstrap 4的所有内容，这可能需要一些时间才能完成，具体取决于您在应用程序中拥有的内容。

如果您只想修复Bootstrap 4的导航栏，如果您将其作为单独的问题发布，我可以帮您完成。