Bootstrap停止使用React [英] Bootstrap stopped working with React

问题描述

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

Yesterday everything my app was working well until today. I have a react application with Bootstrap. Today I refreshed my application, and all CSS with Bootstrap stopped working.

在我的package.json中是"react-bootstrap":"^ 0.31.5"，我还像这样在index.html中添加了指向脚本的链接:

In my package.json is "react-bootstrap": "^0.31.5", I also added a link to a script in the index.html like this:

  <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">

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

For example, I added this code:

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>

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

and in my application is looking like this:

GLyphicon也不能这样工作:

also GLyphicon not working like this:

 <Glyphicon glyph="align-left" />

当我单击导航栏中的这个小按钮时，仅显示菜单1秒钟，然后将其放下.

When I click on this small button in Navbar, show menu for only 1 sec and drop it up.

您有解决方案吗?

推荐答案

如果要加载:

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

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

that means you are loading Bootstrap 4.0.0 because that's the latest.

并且因为Bootstrap 4与Bootstrap 3完全不兼容，这会破坏您的布局.

And because Bootstrap 4 is totally incompatible with Bootstrap 3 that breaks your layout.

解决方案:

要么为Bootstrap 3加载css(以及相应的js)文件，要么迁移到Bootstrap4.

Either load the css (as well as the corresponding js) files for Bootstrap 3 OR migrate to Bootstrap 4.

但是，迁移到Bootstrap 4将需要您手动调整Bootstrap 4的所有功能，这可能需要花费一些时间才能完成，具体取决于应用程序中有多少东西.

However, migrating to Bootstrap 4 would require you to manually adjust everything for Bootstrap 4 which can take quite some time to do depending on how much stuff you have in your application.

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

If you just want to fix the navbar for Bootstrap 4, I can help you do that if you post it as a separate question.

这篇关于Bootstrap停止使用React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！