Bootstrap 停止使用 React

IT技术 twitter-bootstrap reactjs twitter-bootstrap-3 bootstrap-4
2021-05-04 23:11:42

昨天我的应用程序一切正常,直到今天。我有一个带有 Bootstrap 的 React 应用程序。今天我刷新了我的应用程序,所有带有 Bootstrap 的 CSS 都停止工作了。

在我的 package.json 是“react-bootstrap”:“^0.31.5”,我还在 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 秒然后将其放下。

你有什么解决办法来解决这个问题吗?

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 的导航栏,如果您将其作为单独的问题发布,我可以帮助您做到这一点。